由promise更改的范围变量不会更新dom

Question

我对AngularJS很新，所以请耐心等待。我正在尝试实现一个画廊滑块类型的应用程序，但我需要加载页面并在所有图像加载之前执行操作，因为它们非常大并且可能有很多图像。我正在尝试通过承诺执行此操作，哪个工作正常并返回我的json对象，但当范围变量更改时，我没有看到页面上的更新。请考虑以下示例：

我的指示：

    iconic.directive('slider', function () {
    return {
        restrict: 'E',
        templateUrl: 'Home/_Slider',
        controller: 'SliderController'
    }
});

...注意我在指令中指定了控制器。这可以在下面的控制器中显示我的测试变量。

我的控制器：

iconic.controller('SliderController', function ($scope, ImageFactory) {

    ImageFactory.getSliderImages()
        .then(function (result) {
            $scope.photos = result;
        });

    $scope.testvalue = 'test'

});

我是影像工厂：

iconic.factory('ImageFactory',function ($http, $timeout, $q) {
    return {
        getSliderImages: function () {
            var dfd = $q.defer();
            $timeout(function () {
                dfd.resolve([
                    { url: 'http://placehold.it/1920x480', caption: 'Fancy sports picture1' },
                    { url: 'http://placehold.it/1920x480', caption: 'Fancy sports picture2' },
                    { url: 'http://placehold.it/1920x480', caption: 'Fancy sports picture3' },
                    { url: 'http://placehold.it/1920x480', caption: 'Fancy sports picture4' }
                ])
            }, 2000);
            return dfd.promise;
        }
    }
});

我将通过$ http获取数据，但我只是把它们放在她的测试中。

模板：

<div id="contentslider">
<!-- CONTENT -->
<ul class="contentSlider_list">
    <li>
        <img src="http://placehold.it/1920x480" width="1920" height="480" alt="" />
    </li>
    <li  data-ng-repeat="photo in photos">
        <img data-ng-src="{{ photo.url }}" width="1920" height="480" alt="" />
    </li>
</ul>

...注意添加第一个li只是为了看它是否会渲染。

无论如何，当应用程序触发时，我会进入$ scope.photos =结果行，并且它有数据。但永远不要更新dom。