How to use ng-href with absolute url?

I solved it by prefixing data in json with 'http://' to make them trully absolute urls, and angularjs respects that.

Then I understood that angular is actually not doing anything with value, it is just putting it there as it is, and it is my fault to see that.

updating code to this solves problem when all urls are like 'www.google.com'

<a ng-href="http://{{link.url}}">{{link.title}}</a>

Plain old 'inspect element' uncovered issue, and I ignored the fact that ng-href binds from {{value}} syntax, so this is why my first attempt to put ng-href="'http://'+{{value}}" failed and led me to ask question prematurely, but I'm not sure if I should delete it as I may not be only one making such mistake.


As Goran said, his solution will work only if all urls are like 'www.google.com'.

If you have a combination of different types of the urls, e.x. 'www.google.com', 'https://github.com', 'http://goo.gl', 'github.com', you can use ng-href with an angular filter:

<a ng-href="{{link.url|myFilter}}">{{link.title}}</a>

and a filter, which will append 'http://' to your url, if it starts with 'www':

'use strict';
myApp.filter("myFilter", function () {
    return function (link) {
        var result;
        var startingUrl = "http://";
        var httpsStartingUrl = "https://"; 
        if (link.startWith(startingUrl) || link.startWith(httpsStartingUrl)) {
            result = link;
        }
        else {
            result = startingUrl + link;
        }
        return result;
    }
});
String.prototype.startWith = function (str) {
    return this.indexOf(str) == 0;
};