Can I use ng-click to bind data to another element with AngularJS? -

new angular , experimenting replace jquery functionality.

i have basic ul/li setup countries , provinces:

<div ng-app="findrep">   <ul class="country-list" ng-controller="loccontroller">     <li data-ng-repeat="country in countries">       <a data-repid="{{country.repid || '-1'}}">{{country.name}}</a>       <ul class="provinces-list" style="display: none">         <li data-ng-repeat="province in country.provinces">           <a data-repid="{{province.repid}}">{{province.name}}</a>         </li>       </ul>     </li>   </ul>    <!-- testing here -->   repid: {{repid}} </div> 

the way built jquery, before experimenting angular, if country had rep existed entire country, in didn't equal "-1", move next step, grab repid html5 data attribute:

var repid = $(this).data("repid"); 

and proceed other operations irrelevant question based on id.

if rep did not exist country, means there individual reps provinces of country, , use jquery show list of provinces, allowing user click on 1 of them, , proceed other operations based on repid.

this simple, keep reaching jquery, think common problem.

i'm pulling initial data in via web api. i'd understand/figure out how is:

1. create show/hide of ul class provinces-list if repid = "-1".
2. basically proceeds until either country or province has rep, , once does:
3. have ability bind data attribute want anywhere else within scope of app.

so if have:

<div ng-app="findrep">    anywhere within app, i'd able use {{repid}} {{repname}} , on. </div> 

what i've tried

i tried use factory hold initial blank data rep, such as:

app.factory("rep", function() {   var data = {     repid: null,     repname: ''   };    return {     getrepid: function() {       return data.repid     },     etc.   } 

and using ng-click call function , access data (this).

i'm rambling on, , think need example, or push in right direction. it's harder thought grasping concept without using jquery crutch.