Is there a way to re-populate my table below when the select is changed ?

I'm not sure how/if these 2 controllers can interact, even though they both live under the same ng-app .

<div class="inner" ng-app="fixturesApp"> <h1 class="center">Upcoming matches</h1> <div ng-controller="leagueController"> <form> <label>Choose league:</label> <select id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select> </form> </div> <div class="row"> <div ng-controller="tableController"> <table class="table"> <thead> <tr> <th>Home</th> <th>Away</th> </tr> </thead> <tbody> <tr ng-repeat="fixture in fixtures"> <td ng-cloak>{{ fixture.homeTeam.name }}</td> <td ng-cloak>{{ fixture.awayTeam.name }}</td> </tr> </tbody> </table> </div> </div> </div>

Here is my logic. Which populates the select with 4 options and sets a default value ..