Updating Values Using Angular’s Two-Way Data Binding: the ng-Model Directive

Using Angular’s built-in ng-model directive is fantastic for easily updating values, whether it comes from our back-end, or our front-end web pages. In this post, I’ll show you how to utilize Angular’s two-way data binding and create more responsive, modern web applications.

DISCLAIMER: We’ll be using a website that has been set up already. The code that we’ll be starting with can be found here. To set up your website to be a Single Page Application, follow my steps in another post, here. To learn more about modularizing your business logic code using Angular Services, read my other post, here.

What is Two-Way Data Binding?

Two-Way Data Binding means that when a value is changed in one location, it is updated in all other instances. In AngularJS, this is done for us, and it is INCREDIBLY useful.

An Example, To Solidify Our Understanding

Say we assign a variable called value1 in our scope, if we bind that to an input box using the ng-model directive, the value is instantly updated on change and this updated value is accessible in our controller. The reverse is also true; If we update our variable value1 using some code or business logic, this value will update on all its instances in the view (web page) for the user.

Let’s use our page2.html for this purpose:

<div>
    <h2>This is page 2!</h2>
   <hr />
   <div>
      <input type="number" ng-model="value1" /><br />
      <hr />
      Value of value1: {{value1}}<br />
      <hr />
      <button type="button" ng-click="increment()">Increment</button>
   </div>
</div>

Here we can see our value1 is bound using our directive mentioned earlier, ng-model, and some code updating our value with the ng-click directive on the increment button.

Now let’s set up our controller for page 2, Page2Controller.js, to handle the declaration of value1 and holding the code to be executed for our increment button. Take care of the note in the code below.

angular.module('app').controller('Page2Controller', function($scope) {

   //value for our data binding demonstration
   $scope.value1 = 0;

   /*
   Modified Using Business Logic
   NOTE: This code is usually separated into a service, but was included here for demonstration purposes
   This is executed every time the user presses the Increment button
   */
   $scope.increment = function() {
      $scope.value1++;
   };
});

Now that our page and controller are ready, let’s include our controller to our index.html page:

<script src="Page2Controller.js"></script>

Then add it to our RouteProvider.js so Angular knows which view to use it for.

when('/Page2', {
    templateUrl: "page2.html",
    controller: "Page2Controller"
}).

What to Take Away From This Example

Playing around with this example, we can see that our value1 is updated in the scope whenever it is changed by using the input box and the value displayed on our page outside the input box is updated in real time. Accessing or modifying value1 from the view or controller, is trivial, making it extremely convenient to use or retrieve data. This is much easier than using something like getElementById, right?

Clearly this is a very basic example, but the idea remains the same for data binding in AngularJS!

We’re done!

We’ve just created a two-way data bound variable using Angular and the ng-model directive!

Play around with your work and see how we can dynamically pass data between our front and back ends. Very nice!

Until next time!

-Alec Wassill