AngularJS directives inside ng-repeat not passing evaluated value

Question

I just started learning AngularJS two days ago, so if you think I did not approach this in an Angular sort of way then please guide me. So the code below is part of my HTML which has the ng-repeat directive

<div class="row" data-ng-repeat="button in buttons" ng-if="$index % 3 == 0">
   <div class="col-lg-3 col-lg-offset-1">
      <button class="btn btn-default button-width" data-ng-click="my_func('{{buttons[$index].desc}}')">{{buttons[$index].name}}</button>
   </div>
   <div class="col-lg-3 col-lg-offset-1">
      <button class="btn btn-default button-width" data-ng-click="my_func('{{buttons[$index + 1].desc}}')">{{buttons[$index + 1].name}}</button>
   </div>
   <div class="col-lg-3 col-lg-offset-1">
      <button class="btn btn-default button-width" data-ng-click="my_func('{{buttons[$index + 2].desc}}')">{{buttons[$index + 2].name}}</button>
   </div>
</div>

The following code is my Angular Controller which is passing the values to the ng-repeat directive in the HTML and then the ng-click directive in the HTML is calling the my_func function in the controller.

remote_app.controller("remote-controller", function($scope, $http) {
    $scope.buttons = [{
        "desc": "OFF_V1",
        "name": "OFF",
    }, {
        "desc": " ",
        "name": " ",
    }, {
        "desc": "SOURCE_1",
        "name": "SOURCE",
    }];
    $scope.my_func = function(command) {
        $http.get("http://localhost:1337?comm=" + command).success(function() {
            $scope.result = "Sent to server - " + command;
        });
    };
})

Now this displays the values fine from the array when the HTML page is rendered but when i click the button which calls the ng-click directive and in turn my_func, the value sent over to the server is not the rendered value of my_func('OFF_V1') but instead the value sent is my_func('{{buttons[$index].desc}}'). I have tried to find a solution but right now things like $apply and $digest are beyond my understanding of Angular , so any help is appreciated.

You are passing a string to your function. Also, don't worry about using {{ }} in your function calls either, that is for string interpolation. Meaning, you will use {{ }} inside your html in order to write that value to the view. — Tj Gienger
Thanks @TjGienger, yes I understand now. I thought that i needed that for $index but now I know that i don't need that for that. — Sartaj Singh Gill
You can also simply pass index like function($index) which is nice for array manipulation. — Tj Gienger
@TjGienger, sorry i don't quite follow . Can you please explain a bit more ? — Sartaj Singh Gill
admittedly I didn't look over you code much, BUT you can just pass the $index into the function and access that specific button from the array inside the controller rather than all that stuff in the html. — Tj Gienger

Anik Islam Abhi Anik Islam Abhi · Accepted Answer · 2015-09-14T02:28:10

if you pass without '' then you will get value as angular will parse his expression into value. but after using '' angular will consider it as a string then it stop parsing. if you wanna to send value try to use without '' but it is recommended not to pass with angular expression({{}}) either way value will be passed

Try like this

data-ng-click="my_func(buttons[$index].desc)"

AngularJS directives inside ng-repeat not passing evaluated value

1 Answers