angularjs - Angular: On button click to invoke controller -

i new angular , have following behaviour working @ present:

• dropdown-section contains button dropdown listing competitions name
• schedule-section contains content loaded controller displays full schedule of game information

i need implement following behaviour:

• user selects list item in dropdown-section
• this list item invokes url use value in ng-repeat invoke schedule-controller , return json information competition
• the schedule-section updated accordingly

i know need use ng-click event, i'm not sure how pass in value controller

i'm not sure how implement page load (where competitions loaded), compared on button click load based on competition selected

any tips appreciated

<div id="dropdown-section" ng-controller="schedule-dropdown-controller">     <div class="btn-group">         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">competition<span class="caret"></span></button>         <ul class="dropdown-menu" role="menu">             <div ng-repeat="(name, value) in dropdown.competitions">                 <li><a href="#">{{name}}</a></li>             </div>         </ul>     </div> </div> <div id="schedule-section" ng-controller="schedule-controller">     <div ng-repeat="(scheduleday, schedulefields) in schedule">         <h5 class="schedule-date">{{scheduleday}}</h5>         <div ng-repeat="(schedulefield, scheduleentries) in schedulefields">             <p class="schedule-field">{{schedulefield}}</p>             <table class="schedule-table">                 <tr class="schedule-entry" ng-repeat="scheduleentry in scheduleentries">                     <td class="schedule-info-small">{{scheduleentry.timeofgame}}</td>                     <td class="schedule-info-small">{{scheduleentry.competition}}:</td>                     <td class="schedule-info-large">{{scheduleentry.teamone}}</td>                     <td class="schedule-info-medium">{{scheduleentry.score}}</td>                     <td class="schedule-info-large">{{scheduleentry.teamtwo}}</td>                 </tr>             </table>         </div>     </div> </div> 

javascript

app.controller('schedule-controller', function($scope, $http) {     $http.jsonp("http://www.myurl.com/abc")         .success(function(response) {             $scope.schedule = response;         });     } ); 

you can achieve using angular's $broadcast , $on methods dispatch , listen event.

first, update markup of selector broadcast event when selecting schedule:

<li><a ng-click="updateschedule(value)">{{name}}</a></li> 

second, in schedule-dropdown-controller inject $rootscope controller , add updateschedule method ng-click attribute works:

$scope.updateschedule = function(value) {     $rootscope.$broadcast('update-schedule', {value: value});   } 

third, update schedule-controller listen event, , trigger schedule update:

app.controller('schedule-controller', function($scope, $http) {      init();       function init() {         /**          * listens broadcast of `update-schedule` event , reloads           * schedule data scope http data source.          */          $scope.$on('update-schedule', function (events, args){              loadschedule(args.value);         });          /**          * if  need load initial schedule data,           * make call loadschedule default value.          */         loadschedule(somedefaultvalue);      }                 function loadschedule(value) {          /**          * since i'm not sure need value,          * you'll need update http method w/ value           * in way need use it.          */         $http.jsonp("http://www.myurl.com/abc")             .success(function(response) {                 $scope.schedule = response;             });      };  }); 

you can use following references learning more broadcasting, emitting, , listening events in angular.

• https://docs.angularjs.org/api/ng/type/$rootscope.scope
• $on , $broadcast in angular