Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <my-directive id="test" ></my-directive>
    
    
</div>

JavaScript

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

myApp.directive('myDirective', function() {
    return {
        restrict: "E",
        template: "<div ng-click='test()'>Click me to update width</div>",
        controller: function($scope, $element) {
            var x = 10;
            $scope.color = "green";
            $scope.test = function  () {
                
                $element[0].style.width = x + "px";
                x += 10;
                console.log($element[0].style.width);
                
            };
            $scope.$watch(function () {
                return $element[0].style.width;
            }, function(newVal, oldVal) {
                
                console.log('Width changed');
            });
        }
     }
});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $timeout) {
    

}

myApp.controller('MyCtrl', MyCtrl);