AngularJS ngcontroller

  • The ng-controller directive is used to attaches a controller class to the view (HTML element).
  • The ng-controller directive creates a new scope.
  • The ng-controller directive compile at the priority level 500.
  • It is supported by all HTML element.
  • The ng-controller is a key aspect of how angular supports the Model-View-Controller design pattern.
  • MVC Component in AngularJS:

    • Model – The models are the properties of a scope. This is the lowest level of the pattern. It is used to manipulating the data. The scope properties are accessed through the bindings.
    • View – The view is a template (HTML with data bindings). It is used to displaying all or part of the data to the user.
    • Controller – The ng-controller directive is used to define the controller classes. The controller class contain a software code that controls the interaction between the Model and View (HTML).

Syntax for ng-controller directive in AngularJS:

<element ng-controller= “expression” ></element>

Parameter value for ng-controller directive in AngularJS:

Value Description
expression The name of the controller

Sample coding for ng-controller directive in AngularJS:

 Tryit<!DOCTYPE html>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="
        <h2>ng-controller Directive in AngularJS Tutorials. </h2>
        <div ng-app="myApp" ng-controller="myController">
            {{ msg }}
        var app= angular.module('myApp', [ ]);
        app.controller('myController', function($scope) {
            $scope.msg = "Welcome To AngularJS Tutorials";


  • The msg data been defined for our AngularJS Application.
msg = "Welcome To AngularJS Tutorials";


  • Controller logic for the AngularJS application
app.controller('scopeCtrl', function($scope)
        $scope.msg = "Welcome To AngularJS Tutorials";


  • Viewable HTML contents in AngularJS Application.
<div ng-app="myApp" ng-controller="scopeCtrl">
                        {{ msg }}

Code Explanation for ng-controller Directive in AngularJS:

Code Explanation for AngularJS ngcontroller

  1. AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
  2. The AngularJS application is defined by ng-app="myApp". The application runs inside the <div> tag. It’s also used to define a <div> tag as a root element.
  3. The ng-controller=”myController” is an AngularJS directive. It is used to define a controller name as “myController”.
  4. {{ msg }} is a used to bind the controller value by using the scope object.
  5. angular.module function is used to create a module. Here has passed an empty array to it.
  6. Here we have declared a controller myController module using apps.controller() function.
  7. The value of the controller modules is stored in scope object. In AngularJS, $scope is passed as first argument to apps.controller during its constructor definition.
  8. Here we have set the value of $scope.msg as “Welcome To AngularJS Tutorials” which are to be used to display the {{ msg }} value in the HTML<div> element.

Sample Output for ng-controller Directive in AngularJS :

    Sample Output for AngularJS ngcontroller

  1. The output displays a message of a variable msg by using a ng-controller directive.

Related Searches to angularjs ng-controller directive