StackOverflow_24125259: watch-doesnt-work-if-i-specify-a-scope-outside-the-link-function

Illustration of answer to http://stackoverflow.com/questions/24125259/watch-doesnt-work-if-i-specify-a-scope-outside-the-link-function.

by ExpertSystem

HTML

<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<div class="panel-body" data-ng-controller="flotChartCtrl">
    <div data-flot-line-chart="" data-data="revenueData.data"
         data-options="line1.options" style="width: 100%; height: 300px;"></div>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('flotChartCtrl', function ($scope) {
    $scope.revenueData = {data: [1, 2, 3]};
    $scope.line1 = {options: {min: 0, max: 100}};
});

app.directive("flotLineChart", function () {
    return{
        restrict: 'A',
        scope: {
            data:    '=',
            options: '='
        },
        link: function(scope, elem, attrs){
            scope.$watch('data', function(data, oldData) {
                console.log(scope);
            });
        }
    };
});