Ng-Bind-Template-5

 

In this example we have two radiobuttons for gender one for male and other for female. we bind the value of the selected gender and value of $scope.msg variable with the span tag below the radio buttons using the ng-bind-template directive.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="controllerName"> Gender:<br /> <label>Male <input type="radio" name="r1" ng-model="gender" value="Male" /> </label><br /> <label>Female <input type="radio" name="r1" ng-model="gender" value="Female" /> </label><br /> <span data-ng-bind-template="{{msg}} {{gender}}"></span> <br /> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.msg="You selected your gender = "; $scope.gender = "Male" }]); </script> </body> </html>
Output