javascript - Bound attribute empty in an angular directive -

i've simple directive

'use strict';  angular.module('ludaooapp')   .directive('rating', function () {     return {       templateurl: 'app/rating/rating.html',       restrict: 'ea',       link: function (scope, element, attrs) {           scope.mark = attrs.mark;           console.log(attrs);     };   }) 

this directive log attributes of directive.

here how use directive :

<rating mark="{{game.rating}}" style="font-size: 30px"></rating> 

and here result of web inspector :

as can see, mark empty mark="" on first line. after, filled in value mark="4.16".

the result if console.log(scope.mark), see 0 instead of 4.16.

i think it's because 4.16 retrieved database and, code executed before {{game.rating}} initialized in controller.

so question is, how deal problem ? , how access "4.16" ?

try use angular promises in service, receives data api, , pass state of deffered object ng-if - decision can set aside rendering of rating directive.

simple example:

<div ng-app="ludaooapp">   <div ng-controller="gamectrl game">     <rating mark="{{game.rating}}" ng-if="game.$promise.status"></rating>   </div> </div>    (function(angular){    "use strict";     angular.module('ludaooapp',[])    .controller('gamectrl', ['$timeout', '$q', function($timeout, $q){         var game = this;         var deferred = $q.defer()         game.$promise = deferred.promise.$$state         $timeout(function(){             game.rating = 4.16;             deferred.resolve();         },3);         }])     .directive('rating', function () {        return {                restrict: 'ea',                 link: function (scope, element, attrs) {              scope.mark = scope.$eval(attrs.mark);              console.log(attrs);        }       };     })  })(window.angular); 

jsfiddle