<!doctype html>
<html ng-app ="AngularExample">
  <head>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  <script src="angularobserve.js"></script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      A word: <input type="text" name="input" ng-model="watchtext" />
      <br/>
	  Word changed {{counter}} times.
	  <br/>
	  Last value of counter was {{lastvalue}}
	  <br/>
	  Current value of counter is {{currentvalue}}
	  <br/>
	  
	  
	  <button ng-click="initCounter()" >
		  Counter = 0
      </button>
     </form>
	 <div id="bar" sample-directive time-interval=1000 datajson="sample.json">
		scope.firstvalue is {{firstvalue}}
		  <br/>
		  scope.secondvalue is {{secondvalue}}
		  <br/>
	 </div> 
	 
	 
  </body>
</html>
function Ctrl($scope) {
  var scope = $scope;
	scope.watchtext = 'First Value';
	scope.counter = 0;
	scope.lastvalue = '';
	scope.currentvalue = '';
	
	$scope.initCounter = function() {
		scope.counter = 0;
	}
 
	scope.$watch('watchtext', function(newValue, oldValue) { 
		scope.counter = scope.counter + 1; 
		scope.lastvalue = oldValue;
		scope.currentvalue = newValue;
	});
}	
/* Styles go here */

angular.module('AngularExample', [])
  .directive('sampleDirective', function ($timeout) {
  return {
      restrict: 'A',
	  scope: {
        timeInterval: '@',
		datajson: '@'
      },
      link: function (scope, elem, attrs) {
		console.log(scope.timeInterval);
		attrs.$observe('timeInterval', function(value) {
			console.log('timeInterval has changed value to ' + value);
			scope.firstvalue = value;
		  });
		attrs.$observe('datajson', function(value) {
			console.log('datajson has changed value to ' + value);
			scope.secondvalue = value;
		  });
		console.log(scope.firstvalue);
		  
		
		var t = $timeout( function() { 
		    scope.firstvalue = 'new--' + ' and old--1' ;
			scope.secondvalue = 'new--' + ' and old--2' ;
			
		}, 2000);
      }
	  
    }
  });