AngularJS Web Application Development Blueprints

Adding actions to the buttons

Now, let's add some click events to our button so that clicking on them shows the box office movies for the respective country.

For this, let's open our movie-list partial located at app/partials/movie-list.html and tweak the code for the buttons as follows:

<button class="btn btn-info" ng-click="loadMovies(country.code)" ng-repeat="country in countries"> {{country.name}}</button>

All we do is add the ng-click directive and call the loadMovie function, passing the country code that we receive from our model. This is all that is needed to get the buttons functional.

Save your file, and refresh your browser to enjoy your finished application.