javascript - 外部 JSON を操作する AngularJS と impressJS

Question

データバインディングにangularを使用していて、繰り返しコードを使用できないようにするとしましょう:

<div id="{{slide.id}}" class="step" data-x="{{slide.x}}" data-y="{{slide.y}}" data-z="{{slide.z}}" data-rotate-x="{{slide.rotateX}}" data-rotate-y="{{slide.rotateY}}" data-rotate-z="{{slide.rotateY}}" data-scale="{{slide.scale}}" ng-repeat="slide in slides">
  {{slide.content}}
</div>

ご覧のとおり、divこの JSON ファイルの各オブジェクトを反復処理するように準備しました。

[
{
  "id":"overview",
  "x":3000,
  "y":1500,
  "z":0,
  "rotateX":0,
  "rotateY":0,
  "rotateZ":0,
  "scale":10,
  "content":"content2"
},
{
  "id":"slide_1",
  "x":1600,
  "y":1800,
  "z":-10,
  "rotateX":0,
  "rotateY":0,
  "rotateZ":0,
  "scale":1,
  "content":"content1"
},
]

ファイルはこれを使用して完全にロードされます:

App = angular.module('App', []);
App.controller('SlideCtrl', ($scope, $http) ->
$http.get('js/slides.json')
     .then((res)->
       $scope.slides = res.data
  )
)

しかし、どういうわけか、出力は次のようになります。

実際に angular と impress を一緒に実装した人はいますか?