Lets start with an example and discuss it!


<div ng-app="" ng-controller="productController">

Category: <input type="text" ng-model="product.productCategory">&nbsp;
Product: <input type="text" ng-model="product.productName">

<p>Function-Output: {{ product.getDisplayName() }}</p>

function productController($scope) {
    $scope.product = {
        productName: "Dell XT200",
        productCategory: "Computer",
        getDisplayName: function() {
            var p = $scope.product;
            return p.productCategory + " - " + p.productName;

Play with example »

Try to change the values in the textboxes – they change the output on the screen immediatly. Wow, isn’t it incredible?


Simply said controllers control the behavior of your AngularJS-application. The variable $scope which is passed to the controller is the thing that holds the model, controller and views in the application separate, but in sync.