Angularjs + Phonegap anchor tag does not open web page - angularjs

Question

I am using AngularJS and PhoneGap to create a mobile app. I've a HTML string with anchor tag, which I display on screen using ng-bind-html. But when I touch the link on the phone it does not open the web site at all. My intention is to open the web site in new browser window. The string that I am passing into ng-bind-html is :
"www.google.com";
Also, Im using InAppBrowser Phonegap plugin for this. But this is still not working.
Please advice.

Answer 1

You can use :
www.google.com
More... https://docs.angularjs.org/api/ng/directive/a
OR
www.google.com
$( "#a_id" ).click(function() {
var url = $(this).attr('href')
var ref = window.open(url, 'random_string', 'location=no');
ref.addEventListener('loadstart', function(event) {
console.log(event.type + ' - ' + event.url);
} );
ref.addEventListener('loadstop', function(event) {
console.log(event.type + ' - ' + event.url);
} );
ref.addEventListener('exit', function(event) {
//console.log(event.type + ' - ' + event.url);
} );
});

Answer 2

I came across this problem to enable links in a twitter list which I was showing in my app.
I ended up using the following with a little help of jQuery:
1) use a filter to add a class to your links
html:
<span ng-bind-html="myLinks | externalLinks"></span>
filter in controller.js
.filter('externalLinks', function() {
return function(text) {
return String(text).replace(/href=/gm, "class=\"ex-link\" href=");
}
});
2) in your controller you can use jQuery to add a click event to the links (I am using a timeout to be sure the links are loaded into the DOM and don't forget to inject $timeout in your controller)
$timeout(function(){
jQuery('.ex-link').click(function (e) {
var url = jQuery(this).attr('href');
e.preventDefault();
var system = "";
if(device.platform == "iOS"){
system = "_blank";
}
else {
system = "_system"
}
window.open(url, system, "location=yes");
})
},1000);
Hope this helps.