Ionic Directive elements not invoking functions (binding) on changes

I started my project using the Ionic Side Menu Starter. I'm trying to get a Rating directive/control to work, from here: https://github.com/fraserxu/ionic-rating

The module is loaded, and the template objects (the stars) render OK. Binding -from- my model/scope works one-time. But, clicking on the stars does nothing.

Some of the js does get invoked: ng-mouseleave="reset()" is hooked up to the parent element and does get invoked. But ng-click="rate($index + 1)" is attached to the

  • that contains the star, and does not (I set breakpoints).

    I suspect it may have something to do with the child scopes that are created based on the starter, but don't know.

    <rating ng-model="review.rating" max="5"></rating>

    And my controller:

    angular.module('myapp.controllers').controller('NewReviewCtrl', function($scope, $stateParams) {
    $scope.review = {};
    $scope.review.rating = 3;
});

    The module is loaded in a separate file:

    angular.module('myapp.controllers', ['ionic.rating']).controller('AppCtrl', function($scope, $ionicModal, $timeout) {
...

    • Dayan's comment nailed it. I had the rating directive inside a label: My Label

    It works fine after removing it from inside the label.