title: Angularjs ng-click inside ng-repeat
body: <p>I'm trying to load a list of clickable news feed URLs in a dropdown-menu. When I use fixed addresses in view, it works fine but when I populate the addresses using controller, dropdown menu is fine but ng-click doesn't work as expected.</p>
  
  <p>Here is jsfiddle of working version:<a href="http://jsfiddle.net/mahbub/b8Wcz/" rel="nofollow">http://jsfiddle.net/mahbub/b8Wcz/</a></p>
  
  <p><strong>This code works:</strong></p>
  
  <pre><code> &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#" ng-click="feedSrc='http://www.abc.net.au/news/feed/45910/rss.xml';loadFeed($event)"&gt;ABC News&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a href="#" ng-click="feedSrc='http://rss.cnn.com/rss/cnn_topstories.rss';loadFeed($event);"&gt;CNN&lt;/a&gt;
       &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>controller code:</p>
  
  <pre><code>var App = angular.module('RSSFeedApp', []);
  
  App.controller("FeedCtrl", ['$scope', 'FeedService', function ($scope, Feed) {
      $scope.loadButonText = "Select news channel";
      $scope.loadFeed = function (e) {
          Feed.parseFeed($scope.feedSrc).then(function (res) {
              $scope.loadButonText = angular.element(e.target).text();
              $scope.feeds = res.data.responseData.feed.entries;
          });
      }
  
  
  App.factory('FeedService', ['$http', function ($http) {
      return {
          parseFeed: function (url) {
              return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;num=50&amp;callback=JSON_CALLBACK&amp;q=' + encodeURIComponent(url));
          }
      }
  
  }]);
  </code></pre>
  
  <p><strong>This code does not:</strong></p>
  
  <pre><code>&lt;ul class="dropdown-menu"&gt;
    &lt;li ng-repeat =" newsChannel in channels"&gt;
    &lt;a href="#" ng-click="feedSrc='{{newsChannel.src}}';loadFeed($event)"&gt;{{newsChannel.title}}&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>controller code:</p>
  
  <pre><code>App.controller("FeedCtrl", ['$scope', 'FeedService', function ($scope, Feed) {
      $scope.loadButonText = "Select news channel";
      $scope.loadFeed = function (e) {
          Feed.parseFeed($scope.feedSrc).then(function (res) {
              $scope.loadButonText = angular.element(e.target).text();
              $scope.feeds = res.data.responseData.feed.entries;
          });
      }
  
  $scope.channels = [
          {
              'src': 'http://www.abc.net.au/news/feed/45910/rss.xml',
              'title': 'ABC News'
          },
          {
              'src': 'http://rss.cnn.com/rss/cnn_topstories.rss',
              'title': 'CNN'
          }
      ];
  
  }]);
  
  
  App.factory('FeedService', ['$http', function ($http) {
      return {
          parseFeed: function (url) {
              return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;num=50&amp;callback=JSON_CALLBACK&amp;q=' + encodeURIComponent(url));
          }
      }
  
  }]);
  </code></pre>
  
  <p>TypeError: Cannot read property 'feed' of null</p>
  
  <p>Any idea why the $scope.feedSrc doesn't get the feedSrc url?</p>
  
  <p>Thanks</p>