Categories: Angularjs

Angularjs controller with example.

Hi, In this tutorial I am going to explain how to use ” Controller “ and scope of the controller in angular js.

Controller is javascript Constructor function. That is used to make the anguler scope.

ng-app -> will specify that you are going to use angular js in this page. You can use in either body[ <body ng-app=””> ] or particluar div [ <div ng-app=””> ]

ng-controller is used to create the controller for particular module.



Controller inside the Controller [ Nested Controller]

We can use nested ng-controllers in angularjs.


<body ng-app="" >
<div ng-controller="FirstController" class="ng-scope ng-binding">
    My name is {{ name }} and I am a {{ type }}
    <div ng-controller="SecondController" class="ng-scope ng-binding">
        {{ name }}
        <div ng-controller="ThirdController" class="ng-scope ng-binding">
            {{ name }} 

 Angularjs Code

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
function CarController($scope){$scope.name='Marimuthu';$scope.type='Programmer and blogger';}
function BMWController($scope){$scope.name='Tutorial about agularjs controller';}
function BMWMotorcycleController($scope){$scope.name='Here I have explained about nested controllers';}</script>

$scope -> used to bind the value into view.
$scope.name -> name is variable. by using the object $scope we declaring the variable for Controlle and can assign the value.

Call or Invoke the Controller inside the Controller.

By using $injector object we can invoke or call the controller inside the controller.

Below example clearly tells how to call the controller inside the controller.

HTML Code :

<body ng-app="" >
<div ng-controller="FirstController" class="ng-scope ng-binding">     
     {{ name }}
    <button ng-click="clickme()">Click Me</button>  

 Angularjs Script

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
function ClickController($scope){
		$scope.name  = 'This is parent controller "ClickController" calling';
function FirstController($scope,$injector){
$scope.name='My name is Marimuthu and I am a Programmer and blogger';

Lets start with Controller use.

Sample program for how to use Controller.

Attributes  used in this program.

1. ng-controller
2. ng-model
3. ng-binding
4. ng-repeat
5. ng-click

HTML Code:

<div ng-controller="ContactController" class="ng-scope">
    <form class="ng-pristine ng-valid">
        <input type="text" name="name" ng-model="newcontact.name" class="ng-pristine ng-valid"> <br />
        <input type="text" name="email" ng-model="newcontact.email" class="ng-pristine ng-valid"> <br />
        <input type="text" name="phone" ng-model="newcontact.phone" class="ng-pristine ng-valid">
        <input type="hidden" ng-model="newcontact.id" class="ng-pristine ng-valid">
     <input type="button" value="Save" ng-click="saveContact()">
    <br /> <br />
<table border="1">
<!-- ngRepeat: contact in contacts --><tr ng-repeat="contact in contacts" class="ng-scope">
    <td class="ng-binding">{{ contact.name }}</td>
    <td class="ng-binding">{{ contact.email }}</td>
    <td class="ng-binding">{{ contact.phone }}</td>
        <a href="#" ng-click="edit(contact.id)">edit</a> | 
        <a href="#" ng-click="delete(contact.id)">delete</a>

 Angular Code :

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
var uid = 1; 
function ContactController($scope) {     
    $scope.contacts = [
        { id:0, 'name': 'Marimuthu', 
          'phone': '123-2343-44'
    $scope.saveContact = function() {
        if($scope.newcontact.id == null) {
        //if this is new contact, add it in contacts array
        $scope.newcontact.id = uid++;
        } else {
        //for existing contact, find this contact using id
        //and update it.
        for(i in $scope.contacts) {
            if($scope.contacts[i].id == $scope.newcontact.id) {
            $scope.contacts[i] = $scope.newcontact;
        //clear the add contact form
        $scope.newcontact = {};
    $scope.delete = function(id) {
        //search contact with given id and delete it
        for(i in $scope.contacts) {
            if($scope.contacts[i].id == id) {
                $scope.newcontact = {};
    $scope.edit = function(id) {
    //search contact with given id and update it
        for(i in $scope.contacts) {
            if($scope.contacts[i].id == id) {
                //we use angular.copy() method to create 
                //copy of original object
                $scope.newcontact = angular.copy($scope.contacts[i]);


Thanks!. If you like this article don’t forget to share and comment.

Marimuthu :