angular.jsで使用されている変数をデバッグするには？

Question

下記のソースがあります。
変数Coursesに入っているものを
ディベロッパーツールまたはコンソールで確認したいと思っております。
良い方法はありますでしょうか？
よろしくお願いします

<select ng-model="course_hit" name="xxx">
  <option value='0' ng-if="Courses.length == null">ooo</option>
  <option ng-repeat="course in Courses" value="@{{course.id}}">
    @{{course.name}}
  </option>
</select>

Answer 1

2系以降はTypeScriptベースになっており、名称もAngularに変更されていますが、
名称がAngularJSってことは1系ですか？

もし1系ならばjQueryとの併用でスコープにアクセスが可能です。
参考サイト: AngularJSで定義した関数を、jQueryから呼ぶ方法

Chromeならばデベロッパーツールで要素を掴んで、コンソール内で$0を打ち込むと
その要素をJSの要素として扱えるので、
「その要素に該当しそうな箇所を右クリック」→「検証」→「コンソールを開き下記のコマンドを入力」
…という手順でスコープにバインドさせた値を確認したり、メソッドを叩いたりという事が可能です。

$($0).scope().propertyName

Answer 2

デバッグ用のファンクションを作ってそちら側にブレークポイントをセットする方法ではいかがでしょうか。

<option value='0' ng-if="CheckCourses(Courses) && Courses.length == null">ooo</option>

$scope.CheckCourses = function(Courses) { console.dir(Courses); return true; };

ご参考になれば。