AngularJS Scope as HTML attribute value

Question

I am trying to use an AngularJS $scope as an HTML attribute rather than viewable text.

main.js

var myApp = angular.module('myApp');

myApp.controller("buttonCtrl", ['$scope', function($scope){

$scope.johnny = [
    {quote: 'Anything for My Princess', controller: 'Princess'}
];

}]);

page1.html

<button ng-repeat="button in johnny" 
    ng-class="dynamic" 
    class="topcoat-button"
    ng-controller="{{button.controller}}"   <---- this is what does not work 
    ng-click="play()">
    {{button.quote}}
</button>

How can I fix this so I can add these variables as an attribute value.

Thanks

possible duplicate of [AngularJS: dynamically assign controller from ng-repeat](http://stackoverflow.com/questions/13944207/angularjs-dynamically-assign-controller-from-ng-repeat) — karaxuna, Mar 23 '14 at 08:08

score 1 · Accepted Answer · answered Mar 23 '14 at 08:10

1

Angular.js is a bit weird when doing this, but this should work. Also you're using ng-repeat wrong, but it's fixed below.

<button ng-repeat="johnny in buttons" 
    ng-class="dynamic" 
    class="topcoat-button"
    ng-controller="this.johnny.controller"
    ng-click="play()">
    {{johnny.quote}}
</button>

answered Mar 23 '14 at 08:10

Zoey Mertes

3,139
19
23

Hi, Thank you for responding. when I put in this.johnny.controller the button I see {{johnny.quote}} instead of the value. Also, I can only see the buttons if johnny is after "in". – benjipelletier Mar 23 '14 at 08:41
Ah yes, it is buttons in johnny, but I need to use {{button.quote}}; however, ng-controller is not working. I have updated my question so it is correct. – benjipelletier Mar 23 '14 at 08:49
Ohh, I took out the quotes on Princess and that solved it. Thank you very much for leading me to the answer! – benjipelletier Mar 23 '14 at 08:52

AngularJS Scope as HTML attribute value

1 Answers1