$scope 是控制器跟视图之间的中介，它可以让我们在控制器还有视图之间交互数据。所有在视图上设置的变量，可以通过 $scope 在控制器上访问到，所有添加到 $scope 上的数据也都可以在视图上显示出来。

先打开 app.js ，在之前定义的 UserController 这个控制器里面，我们先添加一个变量 ... var name = "wanghao" ...

myApp.controller('UserController', function ($scope) {
var name = 'wanghao';
});

然后再打开 index.html ... 在这个使用了 UserController 控制器的 div 元素里面，用一个绑定 ... 输入两组花括号 ... 要显示的东西是在这个控制器里的 name 这个变量 ... 保存 ... 在浏览器上并没有显示出控制器里的 name 这个变量的值 ... 因为这个变量属于控制器内部本地的变量 ... 不能用到视图上。想要让这个数据在视图上可用，可以通过 $scope 这个东西 ...

先把它注入到控制器里面 ... 让它作为这个匿名函数的一个参数 ... $scope ... 然后我们再把 name 添加到 $scope 的上面 ... 因为添加到 $scope 上面的东西，我们都可以在视图上访问到 ...

myApp.controller('UserController', function ($scope) {
$scope.name = 'wanghao';
});

保存 ... 在浏览器上会显示出 name 的值 ... 这里我们也可以把一个对象添加到 $scope 上面，比如添加一个叫 user 的对象 ... 先让它等于一个空白的对象 ... 然后在这个对象里面，再添加一个 name 属性 ... 它的值设置成 wanghao ... 再添加一个叫 email 的属性 ... 它的值是 wanghao@ninghao.net ..

myApp.controller('UserController', function ($scope) {
$scope.user = {};
$scope.user.name = 'wanghao';
$scope.user.email = 'wanghao@ninghao.net';
});

回到 index.html ... 再改造一下 ... 这里输出 user 的 name 属性 ... 前面再加上点文字 ... 另起一行 ... 再输出 user 的 email ...

<div ng-controller="UserController">
<p>用户名：{{ user.name }} </p>
<p>E-mail：{{ user.email }}</p>
</div>

保存 ... 在浏览器上，会显示出从控制器那里设置的 user 对象里面的属性的值。