Angular js directive call with controller data binding

Question

View

<star-rating ratingValue="ratings" readonly="true"></star-rating>
<div><strong>Rating 1:</strong>{{ratings}}</div>

Controller

app.controller('ProductCtrl', function ($scope, $http, $ionicSlideBoxDelegate, $resource, $state, $stateParams, $rootScope, $compile, $ionicPopup, $location, $sce) {
        $scope.ratings  = 0;
        this.isReadonly = true;
        this.rateFunction = function(rating) {
          console.log('Rating selected: ' + rating);
        };

        $http.defaults.useXDomain = true;
        $http.get(web_service + 'product/get', {
            params: {id: $stateParams.ProductId},
            headers: {}
        }).success(function (response) {
            $scope.product = response.product;
            console.log(response.product);
            $ionicSlideBoxDelegate.update();
            $scope.ratings = response.product.rating;
            this.rateFunction = function(rating) {
                console.log('Rating selected: ' + rating);
            };
        })
        .error(function (err) {
            alert("ERROR");
        });

    }).directive('starRating', starRating);

Directive

function starRating() {

    return {
      restrict: 'EA',
      template:
        '<ul class="star-rating" ng-class="{readonly: readonly}">' +
        '  <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' +
        '    <i class="ion-ios-star"></i>' + // or &#9733
        '  </li>' +
        '</ul>',
      scope: {
        ratingValue: '=?',
        max: '=?', // optional (default is 5)
        onRatingSelect: '&?',
        readonly: '=?'
      },
      link: function(scope, element, attributes) {
        if (scope.max == undefined) {
          scope.max = 5;
        }
        scope.$observe('ratingValue', function(value){
            console.log(value);
            //$scope.nav.selection = value
        });
        function updateStars() {
          scope.stars = [];
          for (var i = 0; i < scope.max; i++) {
            scope.stars.push({
              filled: i < scope.ratingValue
            });
          }
        };
        scope.toggle = function(index) {
          if (scope.readonly == undefined || scope.readonly === false){
            scope.ratingValue = index + 1;
            scope.onRatingSelect({
              rating: index + 1
            });
          }
        };
        scope.$watch('ratingValue', function(oldValue, newValue) {
          if (newValue) {
            updateStars();
          }
        });
      }
    };
  }

When initial value of $scope.ratings is number like 1,2,3 then starts prints but the value retrieved by ajax request is not getting added to directive and in directive values shows "undefined" and no starts getting printed.

The tag below directive in view code gives retrieved value referring to this Codepen: http://codepen.io/TepigMC/pen/FIdHb

What I am missing in directive?

Answer 1

use ng-if so that the directive is called after you have $scope.ratings.

<star-rating ng-if="ratings" ratingValue="ratings" readonly="true"></star-rating>