AngularJSでデバッグのために変数の値を表示する #Angular

AngularJSを使用して開発を行っている際、$scopeやcontrollerに格納されている値を確認したいというケースがよくあります。そのような時、<pre> と json フィルタを使用するとUI上で値を簡易的に確認することができます。以下に例を示します。

Controller

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.',
    };
  })

View

<div ng-controller="mainController as main">
  <pre>{{value1|json}}</pre>
  <pre>{{main.value2|json}}</pre>
</div>

実行例

また、こちらの記事も参考になります。
AngularJSで便利なChromeデバッグTips