无法弄清楚为什么角度绑定在Codepen脚本中不起作用

Question

I'm trying to use angular in codepen, which it seems to support, but I can't bind to my controller's $scope object for some reason. I've tried a couple different versions of angular via cdn and there are other pens I've seen that are able to successfully use angular. Can anyone tell me why my implementation isn't working? Here is the pen . the version of angular used is 1.4.0 .

Here is the html code:

<div class="container" ng-app="App">
  <div class="row" ng-controller="catControl">
    <div class="col-md-12">
      <div class="well">
        {{2 + 2}} </br>
        {{'cat'}} </br>
        {{$scope.cat}} <!-- Why doesnt this one work? -->
      </div>
    </div>
  </div>
</div>

and here is the JS code:

var App = angular.module("App", [])
  .controller("catControl", function($scope) {
    $scope.cat = 'cat';
  });

Thanks.

Answer 1

You need learn more about $scope . We never user {{$scope.key}} in view. Instead we we use just {{key}} in View

Your code should be

<div class="container" ng-app="App">
  <div class="row" ng-controller="catControl">
    <div class="col-md-12">
      <div class="well">
        {{2 + 2}} </br>
        {{'cat'}} </br>
        {{$scope.cat}} <!-- This will not work -->
        {{cat}} <!-- This will work -->
      </div>
    </div>
  </div>
</div>

learn more about scope at This link & This Link