JSFiddle - React, Tailwind, and code Playground

by JongMin Han

HTML

<body ng-app="scopeExample">
    <div class="show-scope-demo">
        <div ng-controller="GreetController">
            Hello {{name}}!
        </div>
        <div ng-controller="ListController">
            <ol>
                <li ng-repeat="name in names">
                    {{name}} from {{department}}
                </li>
            </ol>
        </div>
    </div>
    
    </br></br><hr></br>
    <div class="show-scope-demo" ng-controller="Ctrl">              
        $scope.year : {{year}} </br>
        $scope.name : {{name}}</br>             
    <div ng-controller="Ctrl2">         
        $scope.year : {{year}} </br>
        $scope.name : {{name}}</br> 
    </div>
    </div>
    
</body>

CSS

.show-scope-demo.ng-scope,
.show-scope-demo .ng-scope  {
  border: 1px solid red;
  margin: 3px;
}

JavaScript

angular.module('scopeExample', [])
.controller('GreetController', ['$scope', '$rootScope', function($scope, $rootScope) {
  $scope.name = 'World';
  $rootScope.department = 'Angular';
}])
.controller('ListController', ['$scope', function($scope) {
  $scope.names = ['첫번째', '두번째', '세번째'];
}])
.controller('Ctrl', ['$scope', function($scope) {
  $scope.name = 'Embian'; //   ---> name : Nextree
}])
.controller('Ctrl2', ['$scope', function($scope) {
  $scope.year = '2015'; // ---> name : 존재안함.
}]);