Биндинг модели директивы к данным сервиса, которые загружаются асинхронно

Question

[snater]

Пытаюсь привязать модель кастомной директивы к данным сервиса. Проблема в том, что при обновлении данных сервиса по таймауту или в колбеке ajax-запроса модель директивы не обновляется.

Пример: codepen.io/snater/pen/IjvFa

И код:

<div ng-app="asyncServiceTest" ng-controller="testController">
    <bind-to-service></bind-to-service>
</div>

app = angular.module "asyncServiceTest", []

app.directive "bindToService", ["dataService", (dataService) ->
    restrict: "E"
    scope: {}
    template: "<div>{{ test }}</div>"
    link: (scope) ->
        scope.test = dataService.test
]

app.factory "asyncService", ["dataService", "$timeout", (dataService, $timeout) ->
    load: ->
        dataService.test = "SYNC DATA!"  # Works fine

        $timeout ->
            dataService.test = "ASYNC DATA!" # Doesn't work ((
        , 2000
]

app.factory "dataService", ->
    test: "Init Data"

app.controller "testController", ["$scope", "asyncService", ($scope, asyncService) ->
    asyncService.load()
]

Может я нарушаю какие-то концепции angular и так работать не должно? Спасибо.

Answer 1

[snater]

Все стало понятно. Контроллер запускается до директивы и в момент инициализации модели status в dataService.test уже находится строка «SYNC DATA!» (я же подумал, что сработал биндинг). А строка «ASYNC DATA!» не записалась в модель потому, что я попытался забиндиться на примитив, если dataService.test будет объектом все отработает как положенно.