angularjs, unable to assign values to multiple attributes in custom directive -

i stuck problem have written custom directive rate stars, user can rate 1 5 clicking on stars, successful in achieving this.

<span starrating class="star-rating" rating="ratedvalue" ></span> 

but using same directive display customer reviews, have isolated scope variable called "rating", , works too.

<span starrating class="star-rating" readonlyflag="true" rating="reviewitem.rating" ></span> 

but time dont want user click , change rating. hence declaring variable in isolated scope of directive called "readonlyflag". when assign value readonlyflag in directive attribute. unable value in link function.

the directive code below :

angular.module("pagedirectives",[]).directive("starrating", function(){     return {         restrict : 'a',         template :'<ul class="list-inline">'     + ' <li ng-repeat="star in stars" ng-class="{filled: $index<=selectedindex, filled:$index<rating}" ng-click="toggleindex($index)">'         + '  <i class="glyphicon glyphicon-star fa-2x"></i>'         + ' </li>'         + '</ul>',         scope : {             rating : '=',             readonlyflag : '=',      },         link: function (scope) {             scope.stars=[1,2,3,4,5];             scope.toggleindex= function(index){                 if(!scope.readonlyflag){                     scope.selectedindex=index;                     scope.rating=index+1;                 }              }         } }; }); 

you should use read-only-flag="true" value directive. please notice dashes in attribute.

isolated scope camelcase dashed in attributes.

please have @ demo below or in fiddle.

angular.module('demoapp', [])  .controller('maincontroller', function($scope) {  	$scope.readonly = false;  	$scope.reviewitem = {      	rating: 3      };  })  .directive("starrating", function(){      return {          restrict : 'a',          template :'<ul class="list-inline">'      + ' <li ng-repeat="star in stars" ng-class="{filled: $index<=selectedindex, filled:$index<rating}" ng-click="toggleindex($index)">'          + '  <i class="glyphicon glyphicon-star fa-2x"></i>'          + ' </li>'          + '</ul>',          scope : {              rating : '=',              readonlyflag : '=',        },          link: function (scope) {              scope.stars=[1,2,3,4,5];              scope.toggleindex= function(index){              	console.log(scope.readonlyflag)                  if(!scope.readonlyflag){                      scope.selectedindex=index;                      scope.rating=index+1;                  }                }          }  };  });

.filled  {      color: red  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>  <div ng-app="demoapp" ng-controller="maincontroller">      toggle read-only <input ng-model="readonly" type="checkbox"/>      <span starrating class="star-rating" read-only-flag="readonly" rating="rating" ></span>      <h2>      read-only      </h2>   <span starrating class="star-rating" read-only-flag="true" rating="reviewitem.rating" ></span>  </div>