The ng-controller Directive in AngularJS is used to add a controller to the application. It can be used to add methods, functions, and variables that can be called on some event like click, etc to perform certain actions.
Syntax:
<element ng-controller="expression">
Contents...
</element>
Parameter value:
- expression: It refers to the name of the controller.
Example 1: This example uses the ng-controller Directive to display the input elements.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-controller Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "app" style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-controller Directive</ h2 >
< br >
< div ng-controller = "geek" >
Name:
< input class = "form-control" type = "text" ng-model = "name" >
< br >< br >
You entered:
< b >
< span >{{name}}</ span >
</ b >
</ div >
< script >
var app = angular.module('app', []);
app.controller('geek', function($scope) {
$scope.name = "geeksforgeeks";
});
</ script >
</ body >
</ html >
|
Output:

Example 2: This example uses the ng-controller Directive to display content after clicking the button.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-controller Directive</ title >
< script src =
</ script >
</ head >
< body ng-app = "app" style = "text-align:center" >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >ng-click Directive</ h2 >
< div ng-controller = "app" >
< button class = "btn btn-default"
ng-click = "best()" >
Button 1
</ button >
< button class = "btn btn-primary"
ng-click = "notbest()" >
Button 2
</ button >
< br >
< p >Quick sort is < b >{{res}}</ b >.</ p >
</ div >
< script >
var app = angular.module('app', []);
app.controller('app', function($scope) {
$scope.best = function() {
return $scope.res = "best";
};
$scope.notbest = function() {
return $scope.res = "not always good";
};
});
</ script >
</ body >
</ html >
|
Output: