Manipulating DOM using a directive

HTML

<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<body ng-app="docsTimeDirective">
    <div ng-controller="Controller">Date format:
        <input ng-model="format">
        <hr/>Current time is: <my-current-time time="format"></my-current-time>

    </div>
</body>

JavaScript

angular.module('docsTimeDirective', [])
      .controller('Controller', ['$scope', function ($scope) {
      $scope.format = 'M/d/yy';
  }])
      .directive('myCurrentTime', ['$interval', 'dateFilter', function ($interval, dateFilter) {

      return {
          restrict: 'AE',
          scope: {
              time: '='
          },
          link: function link(scope, element, attrs) {
              var format,
              timeoutId;

              function updateTime() {
                  element.text(dateFilter(new Date(), format));
              }

              scope.$watch('scope.time', function (value) {
                  console.log(scope.time)
                  format = value;
                  updateTime();
              });

              element.on('$destroy', function () {
                  $interval.cancel(timeoutId);
              });

              // start the UI update process; save the timeoutId for canceling
              timeoutId = $interval(function () {
                  updateTime(); // update DOM
              }, 1000);
          }
      };
  }]);