javascript - Adding angular attributes after angular bootstraps -

javascript - Adding angular attributes after angular bootstraps -

i have section of html user in command of, need give elements ng-click. know general construction of html ul li's each page, , ul's within li's other li's each sub-page. exclusively controlled user , can't touch html directly.

say has created:

<ul> <li><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#blog">blog</a></li> <li><a href="#contact">contact</a></li> </ul>

and want turn into:

<ul> <li><a ng-click="$event.preventdefault(); openpage($event.target)" href="#home">home</a></li> <li><a ng-click="$event.preventdefault(); openpage($event.target)" href="#about">about</a></li> <li><a ng-click="$event.preventdefault(); openpage($event.target)" href="#blog">blog</a></li> <li><a ng-click="$event.preventdefault(); openpage($event.target)" href="#contact">contact</a></li> </ul>

how can after page has loaded , angular has bootstrapped? know typically, solution create directive anchor tags replaces them, need text in anchor tags remain whatever user set, need href remain same, , need impact anchor tags within section. can't effect anchor tags outside of parent ul tag.

simply put, there similar using jquery add together attributes?:

$('ul').find('a').attr('ng-click', '$event.preventdefault(); openpage($event.target)');

would work? http://plnkr.co/edit/vxownuanbqskuihpnvyz

leaving href attribute empty prevents default in angular.

after application has bootstrapped can populate "options" collection in model @ same point in application run jquery in illustration above.

let me know think.

javascript jquery html angularjs twitter-bootstrap