Angular.js directive two way binding with loaded data

Question

I am trying to create a directive that load data from some place else.

Here is my directive:

(function() {
    var module = angular.module('HomeModule', ['StorageService']);
    module.directive("home", ['storage',
        function(storage) {
            return {
                restrict: 'A',
                templateUrl: "modules/home/directives/home-directive.html",
                controllerAs: "mediaCtrl",
                controller: function() {
                    var ctrl = this;
                    ctrl.medias = [];
                    storage.get_all(function(items) {
                        var tmp = [];
                        for (id in items) {
                            tmp.push(items[id]);
                        }
                        ctrl.medias = tmp;
                    });

                    // setTimeout(function() {
                    //     ctrl.medias = [{name: "test"}];
                    // }, 3000);
                }
            };
        }
    ]);
})();

And my template:

<input type="search" ng-model="search.name" placeholder="filter medias..." />
<ul>
    <li ng-repeat="media in mediaCtrl.medias | filter:search" >
        {{media.name}}
    </li>
</ul>

What I do not understand is that as soon as I enter something in the filter it updates and then show the data. I even tried to do it with a setTimeout just to see if the problem was my custom service but no.

Answer 1

You could wrap your data update function in a $scope.$apply() call, like so:

storage.get_all(function(items) {
    $scope.$apply(function () {
        var tmp = [];
        for (id in items) {
            tmp.push(items[id]);
        }
        ctrl.medias = tmp;
    });

});