Angular UI Bootstrap Typeahead template ng-src with funciton

Question

I'm wondering how to use a function in the ng-src attribute of the custom template for Typeahead. Here's my html template:

<script type="text/ng-template" id="customTemplate.html">
    <a>
        <img ng-src="getWikiImgs({{match.model}})" width="16">
        <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
    </a>
</script>
<div class="col-xs-10 center alt-txt-light">
    <span class="dash-pg-header-txt">Index an author!</span>
    <br/>
    <hr class="hr-separator"/>
    <br/>
    <div style="height: 1000px;">
        <h4>Search Wikipedia:</h4>
        <input type="text" ng-model="asyncSelected" placeholder="ie: John Bunyan" typeahead="item for item in getWikiResults($viewValue)" typeahead-wait-ms="500" typeahead-loading="loadingWikiResults" typeahead-template-url="customTemplate.html" class="form-control" />
        <br/>
        <i ng-show="loadingWikiResults" class="fa fa-refresh" style="text-align:left; float:left;"></i>
    </div>
</div>

So in the custom template script, i'm trying to use a function in ng-src to get the corresponding image from Wikipedia based on the 'match.model' variable used by Typeahead.

And here's the Controller:

angular.module("app").controller("AuthorCreateController", function($scope, $state, 

$stateParams, $http) {

    $scope.getWikiResults = function($viewValue) {

        return $http.get('http://en.wikipedia.org/w/api.php?', {
            params: {
                srsearch: $viewValue,
                action: "query",
                list: "search",
                format: "json"
            }
        }).then(function($response){
            var items = [];
            angular.forEach($response.data.query.search, function(item){
                items.push(item.title);
            });
            return items;
        });
    };

    $scope.getWikiImgs = function(title) {

        $.getJSON("http://en.wikipedia.org/w/api.php?callback=?",
        {
            action: "query",
            titles: title,
            prop: "pageimages",
            format: "json",
            pithumbsize: "70"
        },
        function(data) {
            $.each(data.query.pages, function(i,item){
                return item.thumbnail.source;
            });
        });
    };


});

Answer 1

The issue is that your template does not have the scope you would reasonably expect it would.

The solution is (depending on where the template occurs) to chain some $parent. calls in front of your function.

See this git issue and this question for more details.

Answer 2

Your problem is NOT actually with calling a function from ng-src. It is rather with CORS [Cross-Resource-Origin-Sharing].

Here is a Plunker for your code: http://plnkr.co/edit/CvqhU9?p=preview

Type "a", for example, in the input then check the console and you will find out that it did manage to call the function. BUT wait 2 secs and the following comes out:

XMLHttpRequest cannot load http://en.wikipedia.org/w/api.php?&action=query&format=json&list=search&srsearch=a. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.

What this in short means is that when you are on www.foo.com domain, you cannot request a resource from www.bar.com unless www.bar.com enabled that. You can check out some answers about this here: XMLHttpRequest cannot load an URL with jQuery

I hope this helps.