javascript - angularjs-how to implement click in angular -

i newbie in angularjs. stuck on code , wanted help.

i having controller called watchlist controller in getting data displayed in watchlist.

however want display data once watchlist tab clicked.

this html code :-

<div class='watchlist' >       <button class='btn' id="watchlist"  ng-click="fetchuserwatchlist()" watchlist-popover ng-controller="watchlistcontroller">         <i class="hidden-tablet hidden-phone"></i>         <span class = 'mywatchlist'>my watchlist</span>         <div class = 'watchlist-spinner ' ></div>       </button>     </div> 

my controller(watchlist):-

$scope.fetchuserwatchlist = function(pageno,callback){         $scope.isloading = true;         $rootscope.isrequest = true;         userapi.mywatchlist({userid:$rootscope.getuser().userid,pageno:pageno}, function(r) {             if (_.isnull(r.watchlistdata)) {                 if(typeof callback == 'function'){                     callback();                 }                 if(pageno == 1){                     $scope.watchlist = [];                     $scope.watchlistcount = 0;                 }                 if (!$rootscope.apicalled && pageno == 1){                     if(!_.isundefined($rootscope.watchlistclicked) && $rootscope.watchlistclicked){                         $rootscope.$broadcast("watchlist::click");                         imageloadingindicator();                     }                     $rootscope.apicalled = true;                 }                  return false;             }             if (!_.isundefined(r.watchlistdata.watchlist)){                 var rawdata = [];                 var tempwatchlist = $scope.watchlist;                  if (_.isarray(r.watchlistdata.watchlist))                     rawdata = r.watchlistdata.watchlist;                 else                     rawdata = [r.watchlistdata.watchlist];                  if (pageno == 1) {                     $scope.watchlistcount = parseint(rawdata[0].totalcount);                 }                  if ($scope.watchlist.length == 0 || ($scope.watchlist.length > 0 && pageno == 1))                     $scope.watchlist = rawdata;                 else                     _.each(sortbydate(rawdata),function(item){                         if (! _.some(tempwatchlist,function(existingitem){ return existingitem.programmeid == item.programmeid; }))                         {                             $scope.watchlist.push(item);                         }                      });                 $scope.watchlistpage += 1;                  $timeout(function(){                      if (!$rootscope.apicalled && pageno == 1){                         if(!_.isundefined($rootscope.watchlistclicked) && $rootscope.watchlistclicked){                             $rootscope.$broadcast("watchlist::click");                             imageloadingindicator();                         }                         $rootscope.apicalled = true;                     }                  },1);                 $rootscope.isrequest = false;                 if(typeof callback == 'function'){                     callback();                 }             }else                 $rootscope.end = true;         });      }; 

so want implement ng-click on controller here in above scenario not help..the data called before button clicked.

please me this

ng-click work using scope:

ng-click="executethis()" 

will in $scope variable named 'executethis'. f.e.:

$scope.executethis = function(){     // stuff want }; 

so when click element has ng-click attribute, executethis function on scope executed. in function should whatever want do. display when click it, use function set variable on scope true , use ng-show display want display.

html:

<div ng-show="varx">somediv</div> 

js inside controller:

$scope.varx = false; 

so whenever set variable true, element should shown.

however, suggest following tutorials since suspect don't yet grasp how angular works.. understanding how fundamentals of angular work necessary if want develop app.