Scope variables changed by promise do not update dom

Question

I am fairly new to AngularJS so bear with me. I am trying to implement a gallery slider type app, but I need the page to load and do stuff before all the images load because they are quite large and there may be a lot of images.I am trying to do this via a promise, which works fine and retuns my json object but when the scope variable changes I dont see the updates on the page. Consider the following example:

My Directive:

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

... notice I am specifying the controller in the directive. This works and renders my test variable from the controller below.

My Controller:

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

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

    $scope.testvalue = 'test'

});

And am image factory:

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;
        }
    }
});

I will be getting data via an $http get later but I just put these in her for testing.

And the template:

<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>

... note the first li was added just to see if it would render.

Anyhow when the application fires I get to the $scope.photos = result line, and it has data. But never updates the dom.

The error is in your bind, your code is correct. Post your template. — Caio Cunha, Apr 25 '13 at 01:46
Pretty strange. Do you simply have a `` at your HTML? Look at [this Plunker I made](http://plnkr.co/edit/BGiBmcblKwr2qBjizull?p=preview). Same code as you, and working as expected. Don't you have any CSS class hiding it? Are there any console errors? — Caio Cunha, Apr 25 '13 at 03:41
None at all actually, hence my confusion. And yes I have just inside the
. I'm at a loss here. Is there anything else I could show you that might help? — Brandon, Apr 25 '13 at 04:31
By the way I found some obscure post. Saying that you should wire this up in the route. But given the context of the rest of the post I was not sure how to set that up. Have a look, maybe this will be helpful? https://groups.google.com/forum/?fromgroups=#!topic/angular/VEtVYUptpPs — Brandon, Apr 25 '13 at 04:33

Scope variables changed by promise do not update dom

0 Answers0