AngularJS: Directive watch controller scope

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<div ng-controller="MyCtrl">
    <form ng-submit="onSubmitted()">
        <input type="name" ng-model="sample" value="Ready to roll for second time!"/>
        <input type="submit" value="submit to scope value"/>
    </form>

    <hr/>
    
    Some other form here. Think line items
    
    <hr />
    <some-directive grid-data="data">Text in template</some-directive>

    

</div>

JavaScript

var app = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.data = [{text:"Ready to roll!"}];
    $scope.sample="Ready to roll for second time!";
    
    $scope.onSubmitted = function() {
        $scope.data.text = $scope.sample;
    };
}


app.directive("someDirective", function() {
    return {
    		restrict: 'E',
        link: function(scope, element, attrs) {
            
            scope.$watch(attrs.gridData, function(oldValue, newValue) {
            		console.log(attrs);
                element.text(newValue);
            });

            
        }
    }
});