Prevent AngularJS from removing data- in attributes

Question

I'm building an image carousel using jCarousel and AngularJS. The carousel works great until I plug in AngularJS and it seems to be because AngularJS is normalizing (removing) all attributes in the HTML which start with data-

The normalization process is as follows: - Strip x- and data- from the front of the element/attributes.

http://docs.angularjs.org/guide/directive

However, jCarousel uses it's own attributes that start with data-, so Angular removes these and causes the carousel to stop working

<div class="connected-carousels ng-scope" ng-controller="ImageCtrl">
    <div class="stage">
        <div class="carousel carousel-stage" data-jcarousel="true">

I'm not using any of the Angular data- prefixed attribute names so is there a way I can prevent Angular from doing the normalization process on data- attributes so that they are not modified? Or perhaps there is a way to force the carousel code to run before the Angular normalization?

Answer 1

The problem was solved by listing the jCarousel .js libraries AFTER the Angular libraries in the HEAD. Here's an example that shows both Angular populated and manually populated carousels working correctly:

http://jsfiddle.net/rWrjw/

  <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
  <script type='text/javascript' src='//cdn.jsdelivr.net/jcarousel/0.3rc1/jquery.jcarousel.min.js'></script>