Controllers

Lets start with an example and discuss it!

Example

<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>
</div>

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

Play with example »

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

Controllers

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.