Q:

angular.jsのディレクティブで定義した$watch式がトリガされない。

自作ディレクティブで親スコープ内変数の変更を検知し、他の処理を実行したいと思っています。
下記の例で実現したいのは、tags1の変更を検知してコンソールログを出力するものです。
index.html内の<sample-directive>をmyapp.jsで定義しています。
また、要素のドラッグ&ドロップ移動にUI.Sortable directiveを使用しています
ブラウザでの読み込み時、console.log("tag1_change");が実行されます。
それ以降、データ１の要素をデータ２に移動させた時、tags1の配列が変更されることは確認できるのですが、ディレクティブでは変更を検知しません。
わかる方いらっしゃいましたら解決方法をご教授願います。
index.html
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        .tags{
            border: 1px solid #CCC;
            min-height: 10px;
            cursor: move;
            list-style: none;
        }
    </style>
</head>
<body ng-app="App" ng-controller="AppCtrl">
    <sample-directive></sample-directive><!--tags1値をウォッチしたい -->
    <div>
        <p>
            グループ１
        </p>
        <ul class="tags" id="tags1" ng-model="tags1" ui-sortable="sortableOptions">
            <li ng-repeat="item in tags1">{{item.value}}</li>
        </ul>
    </div>
    <div>
        <p>
            グループ２
        </p>
        <ul class="tags" id="tags2" ng-model="tags2" ui-sortable="sortableOptions">
            <li ng-repeat="item in tags2">{{item.value}}</li>
        </ul>
    </div>
    tags1:{{tags1|json}}
    <script src="http://d3js.org/d3.v2.js"></script>
    <script src="http://cdn.jsdelivr.net/g/jquery@1,jquery.ui@1.10%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29,angularjs@1.2,angular.ui-sortable"></script>
    <script src="myapp.js"></script>
</body>
</html>

myapp.js
var tags1 = [{
    "id": "1",
    "value": "データ1"
}, {
    "id": "2",
    "value": "データ2"
}, {
    "id": "3",
    "value": "データ3"
}];
var tags2 = [];

var HcApp = angular.module('App', ['ui.sortable'])
    .controller('AppCtrl', ['$scope', function($scope) {

        $scope.tags1 = tags1;
        $scope.tags2 = tags2;

        $scope.sortableOptions = {
            connectWith: ".tags",
        };
    }]);

HcApp.directive('sampleDirective', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            //tags1を監視したい
            scope.$watch('tags1', function(newVal, oldVal) {
                console.log("tag1_change");
                if (newVal === oldVal) {
                    return;
                }
                if (newVal) {
                    console.log("tag1_change_if");
                } else {
                    console.log("tag1_change_else");
                }
            });
        }
    }
});

A:

$watchの第3引数objectEqualityにtrueを設定すると配列の変化を監視することができます。
デフォルトはfalseなので監視されません。
英語版の方にも同じような質問があります。
AngularJS : $watch an object
scope.$watch('tags1', function(newVal, oldVal) {
    console.log("tag1_change");
    if (newVal === oldVal) {
        return;
    }
    if (newVal) {
        console.log("tag1_change_if");
    } else {
        console.log("tag1_change_else");
    }
}, true);

