Interactivity, especially responsiveness, in web applications has become very important. One important concept to fostering further responsiveness is the idea of two-way binding, where changes made to a model or a view are automatically made to the other or vice versa. This recipe looks at how we can leverage data bindings in AngularJS and integrate them with Highcharts.
To set up a basic page and install jQuery and Highcharts, refer to the Getting ready section of the Creating your first chart recipe from Chapter 1, Getting Started with Highcharts.
We will, however, need to make some small changes as shown in the following steps:
Create a folder
angularjs
for our project, and set up a basic project in that folder as described previously.Modify
angularjs/bower.json
as follows:{ "name": "highcharts-cookbook-chapter-8", "dependencies": { "highcharts": "~3.0", "jquery": "^1.9", "angular": "^1.2", // JavaScript framework...