Untitled

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="mainController as main">
  <h2>$scopeに格納された値を表示</h2>
  <pre>{{value1|json}}</pre>

  <h2>controllerに格納された値を表示</h2>
  <pre>{{main.value2|json}}</pre>
</body>

</html>

// Code goes here

angular
  .module('app', [])
  .controller('mainController', function($scope) {
    var vm = this;

    $scope.value1 = {
      name: '$scope',
      text: 'This is $scope value.'
    }

    vm.value2 = {
      name: 'controller',
      text: 'This is controller value.',
      data: [12, 33, 55],
      something: {
        hoge: 'hoge'
      }
    };
  })

/* Styles go here */

# controllerの値を出力するサンプル