Angular js / ionic app url links and function links not working

Question

I'm working on a angular js / ionic based app, I'm new with this.

In my app I retrieve Strava data and inject it into a div via .append();
This is what I have in .append():

$("#list").append("<div><p>some text <a href='https://www.strava.com/athletes/...' target='_blank'>url_link</a></p><p><a on-tap='myFunction()'>trigger_function_link</a></p></div>");

The above code on it's self is working fine except for two things in it.
(1)When I press the first link the URL is opend in a new page in my browser but not in my app.
I tried different things (org.apache.cordova.inappbrowser, javascript, angular js solutions) but non is working.

(2)When I press the second link, the on-tap function is not getting triggered.

When I copy paste the above div directly in my HTML (so it's not injected) everything is working fine, url links are opent in new page or in my native browser app on my device and the angular on-tap function is triggered correctly.

<div><p>some text <a href='https://www.strava.com/athletes/...' target='_blank'>url_link</a></p><p><a on-tap='Strava()'>trigger_function_link</a></p></div>

Now the big question is how come that when my code is injected with .append() my links are not working, and is there a fix?

Thanks!!

Answer 1

Why to use jQuery for which angular has already written a directive for it.

I'd suggest you to use ng-if directive, do keep that div inside your html with some flag like showDiv. Whenever the showDiv is true at that time div will get added into the DOM(shown on html) & when that flag is false div will get removed from the DOM(will get hidden)

<div ng-if="showDiv">
  <p>some text <a href='https://www.strava.com/athletes/...' target='_blank'>url_link</a></p>
  <p><a on-tap='myFunction()'>trigger_function_link</a></p>
</div>

Update

You are getting data from ajax(Ajax call should be done using $http rather than using jQuery), store that data in $scope.objs = data & appending the same div for multiple number of times, I'd suggest you to use ng-repeat to render all divs that would be more efficient way.

<div id="list">
    <div ng-repeat="obj in objs">
        <p>{{obj.clubmember}}<a href='strava.com/athletes/...' ; target='_blank'>url_link</a></p>
        <p><a on-tap='myFunction()'>trigger_function_link</a></p>
    </div>
</div>