Onclick function inside a-href tag in angular controller calling method in same controller

Question

I am loading data from the controller and displaying in view as a list of clickable items in HTML. When selected i want to call a method in the controller to perform some logic.

 items.push("<li><a href='#' ng-click='choosePostcode(" + result.postcode + ");return false;'>" + result.postcode + "</a></li>");

This displays correctly on the view but when clicked my choosePostcode method is not hit. I have tried a few alternatives with no success.

'<li><a href="#" ng-click="alert("test");"> click </a></li>'

'<li><a href="#" ng-click="javascript:alert("test");"> click </a></li>'

    "<li><a href='#' onclick="choosePostcode(result.postcode);return false;"> + result.postcode + </a></li>");

Latest attempt from comments below. Still no success.

  <div ng-app="app" ng-controller="PropertyController">
                            <div class="input-group">
                                <input name="s" class="form-control" ng-model="addr" type="text" placeholder="Search..." size="40" />
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" value="Send" ng-click="addr_search()">Search</button>
                                </span>

                            </div>
                            <div id="search">

                                    <ul>
                                        <li ng-repeat="result in results">
                                            <a href="#" ng-click="$event.preventDefault();choosePostcode(result.postcode)">{{result.postcode}}</a>
                                        </li>
                                    </ul>                                 
                            </div>

Controller Class.js

 function MarkerDrop() {
                    $.getJSON('https://api.postcodes.io/postcodes?lon=' + $scope.userLongitude + '&lat=' + $scope.userLatitude, function (data) {                         
                        if (data.result !== null) {
                            $scope.results = data.result;
                        }
                    });
                }

Answer 1

If you're inserting html that is generated in the javascript, it has to be run through the $compile service in order for angular to recognize it.

Check out the docs here .

Answer 2

I just assuming the case from your comment. Try something like this,

Template:

...
<ul>
   <li ng-repeat="result in results">
      <a href="#" ng-click="$event.preventDefault();choosePostcode(result.postcode)">{{result.postcode}}</a>
   </li>
</ul>
...

Controller :

...
$scope.globalPostcode = '';
$scope.choosePostcode = function(postcode) { 
   $scope.globalPostcode = postcode; 
};
...
function MarkerDrop() {
    $http.get('https://api.postcodes.io/postcodes?lon=' + $scope.userLongitude + '&lat=' + $scope.userLatitude)
    .then(function(result) {                         
       $scope.results = result.data || [];
    });
}
...