title: Adding ng-click handler to repeated element in angularjs
body: <p>Im using angularjs 1.0.7 and trying to add a ng-click handler to a list element which is repeated using ng-repeat, but the function does not fire. Below is the html, along with variations I have tried in comments. I have tried adding the same ng-click function on a different element and it works fine.</p>
  
  <pre><code>&lt;div class="results" ng-cloak ng-show="showList != 0"&gt;
  
      &lt;ul&gt;
          &lt;li ng-repeat="movie in movies" ng-click="getPlaylist(movie.id)"&gt;{{ movie.title }}&lt;/li&gt;
          &lt;!--&lt;li ng-repeat="movie in movies" ng-click="getPlaylist({{movie.id}})"&gt;{{ movie.title }}&lt;/li&gt;--&gt;
          &lt;!--&lt;li ng-repeat="movie in movies" ng-click="getPlaylist('movie.id')"&gt;{{ movie.title }}&lt;/li&gt;--&gt;
          &lt;!--&lt;li ng-repeat="movie in movies" ng-click="getPlaylist(\'{{movie.id}}\')"&gt;{{ movie.title }}&lt;/li&gt;--&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the controller</p>
  
  <pre><code>main.controller('MoviesListCtrl', function($scope, $http, playlist) {
  
      $scope.movies = [];
      $scope.showList = false;
  
  
      $scope.getMoviesList = function (val) {
  
          var link = 'titles?q=' + val + '&amp;limit=10'
  
          $http.get(link).success(function (data) {
              // now we have all our movies and can add them
              $scope.movies = data;
  
              // if there any movies we can show the list
              if ($scope.movies.length &gt; 0) {
                  $scope.showList = true;
              } else {
                  $scope.showList = false;
              }
          });
      };
  
      $scope.getPlayList = function (id) {
          alert(id);
  
      };
  
  });
  </code></pre>