先看個示例

<div ng-app="myApp"   ng-controller="myCtrl">

    <!-- 在該控制器內儲存著如下兩個Model裡的資料
    ng-model 指令用於雙向繫結輸入域到控制器的屬性 --> 
    第一個數字: <input type="text" ng-model="first"><br>
    第二個數字: <input type="text" ng-model="second"><br>
    <br>
    相乘結果: {{first* second
 
}}

</div>

<script>
    //AngularJS 應用程式：在 <div> 內由 ng-app 定義執行。
    var app = angular.module('myApp', []);

    //控制器
    app.controller('myCtrl', function($scope) {//$scope 是一個應用物件，用於呼叫控制器，並儲存Model(模型)的物件
        //給控制器裡的model賦值
        $scope.first= 10;
        $scope.second= 20;
    });
 
</script>

控制器定義

在<div>內由ng-controller 指令定義，操作應用程式的 JavaScript 物件。
其中應用程式是指由ng-app指令定義的物件。

控制器方法

控制器也可以有方法（變數和函式）：

<div ng-app="myApp" ng-controller="myCtrl">

    執行方法: {{methodName()}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl'
 
, function($scope) {
        $scope.methodName= function() {
            return "輸出到頁面";
        }
    });
</script>

外部檔案中的控制器

在大型的應用程式中，通常是把控制器儲存在外部檔案中。
此時只需要把 <script> 標籤中的程式碼複製到名為 myController.js 的外部檔案中，然後引入即可：

<div ng-app="myApp" ng-controller="myCtrl">
    執行方法: {{methodName()}}
</div>

<script src="myController.js"></script>