Angular Bootstrap Rating

Question

I am copying the example from the Angular Bootstrap docs

The HTML(Jade) is :

rating(ng-model="rate" max="max" on-hover="hoveringOver(value)" on-leave="overStar = null") {{rate}}
   span.label(ng-class="{'label-warning': percent<30, 'label-info':percent>=30 && percent<70, 'label-success': percent>=70}", ng-show="overStar && !isReadonly") 
    {{percent}}%
   pre(style="margin:15px 0;")
    | Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}

And the javascript:

app.controller('RatingDemoCtrl' , function ($scope) {
  $scope.rate = 7;
  $scope.max = 10;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };

  $scope.ratingStates = [
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
    {stateOn: 'glyphicon-heart'},
    {stateOff: 'glyphicon-off'}
  ];
});

When I click on the element, I get the following error:

Error: [$compile:nonassign] Expression 'undefined' used with directive 'rating' is non-assignable!

Which I understand has something to do with the data binding. Is this a bug in the ui.bootstrap.rating control or am I doing something obviously incorrect ?

Answer 1

Use value instead of ng-model:

<rating value="rate" max="max"></rating>

Answer 2

Try including angular bootstrap in your module:

angular.module('myModule', ['ui.bootstrap']);