Xtykutl

function directive() {

  return {

    restrict: 'E',

    template: '<button ng-repeat="x in j.array" ng-click="j.set(x)">{{x}}</button>',

    replace: true,

    //scope: {},

    bindToController: {

      array: '=',

      answer: '='

    },

    controller: function() {

      var j = this;

      j.set = function(data) {

        j.answer = data;

      };

    },

    controllerAs: 'j'

  };

}

When I uncomment scope and create an isolate scope the directive no longer works. I'm trying to determine why.

Normally I still have access to the controllerAs in an ng-repeat, in this example when I lose it it's still available on $parent.j. I think there are 3 solutions.

Solution 1 is to leave it not in isolate scope.

Solution 2 would be to convert every reference to j inside the repeat to $parent.j.

Solution 3 is that there is some way to use j without having to use $parent that I'm unaware of.

It may be to do with the replace: true. If you wrap the button in a div, it seems to work! I've made a little Plunker here to demonstrate.