oskwazir/index.html

## index.html
<!DOCTYPE html>
<html ng-app="countdown">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
body{
  font-family: "Avenir Next",sans-serif;
  font-size:36px;
}
</style>
</head>
<body>
  <div ng-controller="EventController" ng-cloak>
      <p>Currenty we are on the <span current-time></span> minute of the hour</p>
    <hr />
    <div ng-repeat="event in events">
      <p>Event occurs every {{ event | ordinal }} minute on the hour</p>
      <p>There are <span time-to-event="{{ event }}"></span> minutes remaining for the next event.</p>
      <hr />
    </div>
  </div>
<script id="jsbin-javascript">
angular.module('countdown', [])
.controller('EventController', function($scope, $interval){
   $scope.events = [15,23];
})
.directive('timeToEvent', function($interval, ordinalFilter){
   return function(scope, element, attrs){
     var stopInterval;
     var eventTime;
     var minutesRemaining;
     var fullHour = 60;

     var updateTimeLeft = function getTimeLeft(){
       var minuteRightNow = new Date().getMinutes();
       if (minuteRightNow < eventTime){
        minutesRemaining = Math.abs(minuteRightNow - eventTime);
       }

       else {
         minutesRemaining = Math.abs((fullHour-minuteRightNow) + eventTime);
       }
       element.text(minutesRemaining);
     };

     scope.$watch(attrs.timeToEvent, function(value) {
        eventTime = value;
        updateTimeLeft();
     });

     stopInterval = $interval(updateTimeLeft, 1000);

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

   };
})
.directive('currentTime',
      function($interval, ordinalFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope, element, attrs) {
          var format = 'mm',  // date format
              stopTime; // so that we can cancel the time updates

          // used to update the UI
          function updateTime() {
            var currentMinute = new Date().getMinutes();
            element.text(ordinalFilter(currentMinute));
          }


          // watch the expression, and update the UI on change.
//           scope.$watch(attrs.myCurrentTime, function(value) {
//             format = value;
//             updateTime();
//           });

          stopTime = $interval(updateTime, 1000);

          // listen on DOM destroy (removal) event, and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        };
      })
.filter('ordinal', function() {
  //https://github.com/jdpedrie/angularjs-ordinal-filter
  var ordinal = function(input) {
    // Only process numeric values.
    if (isNaN(input) || input === null) return input;

    var s=["th","st","nd","rd"],
    v=input%100;
    return input+(s[(v-20)%10]||s[v]||s[0]);
  };

  return ordinal;
});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="countdown">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="EventController" ng-cloak>
      <p>Currenty we are on the <span current-time></span> minute of the hour</p>
    <hr />
    <div ng-repeat="event in events">
      <p>Event occurs every {{ event | ordinal }} minute on the hour</p>
      <p>There are <span time-to-event="{{ event }}"></span> minutes remaining for the next event.</p>
      <hr />
    </div>
  </div>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">body{
  font-family: "Avenir Next",sans-serif;
  font-size:36px;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">
angular.module('countdown', [])
.controller('EventController', function($scope, $interval){
   $scope.events = [15,23];
})
.directive('timeToEvent', function($interval, ordinalFilter){
   return function(scope, element, attrs){
     var stopInterval;
     var eventTime;
     var minutesRemaining;
     var fullHour = 60;

     var updateTimeLeft = function getTimeLeft(){
       var minuteRightNow = new Date().getMinutes();
       if (minuteRightNow < eventTime){
        minutesRemaining = Math.abs(minuteRightNow - eventTime);
       }

       else {
         minutesRemaining = Math.abs((fullHour-minuteRightNow) + eventTime);
       }
       element.text(minutesRemaining);
     };

     scope.$watch(attrs.timeToEvent, function(value) {
        eventTime = value;
        updateTimeLeft();
     });

     stopInterval = $interval(updateTimeLeft, 1000);

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

   };
})
.directive('currentTime',
      function($interval, ordinalFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope, element, attrs) {
          var format = 'mm',  // date format
              stopTime; // so that we can cancel the time updates

          // used to update the UI
          function updateTime() {
            var currentMinute = new Date().getMinutes();
            element.text(ordinalFilter(currentMinute));
          }


          // watch the expression, and update the UI on change.
//           scope.$watch(attrs.myCurrentTime, function(value) {
//             format = value;
//             updateTime();
//           });

          stopTime = $interval(updateTime, 1000);

          // listen on DOM destroy (removal) event, and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        };
      })
.filter('ordinal', function() {
  //https://github.com/jdpedrie/angularjs-ordinal-filter
  var ordinal = function(input) {
    // Only process numeric values.
    if (isNaN(input) || input === null) return input;

    var s=["th","st","nd","rd"],
    v=input%100;
    return input+(s[(v-20)%10]||s[v]||s[0]);
  };

  return ordinal;
});</script></body>
</html>

## jsbin.koturi.css
body{
  font-family: "Avenir Next",sans-serif;
  font-size:36px;
}

## jsbin.koturi.js
angular.module('countdown', [])
.controller('EventController', function($scope, $interval){
   $scope.events = [15,23];
})
.directive('timeToEvent', function($interval, ordinalFilter){
   return function(scope, element, attrs){
     var stopInterval;
     var eventTime;
     var minutesRemaining;
     var fullHour = 60;

     var updateTimeLeft = function getTimeLeft(){
       var minuteRightNow = new Date().getMinutes();
       if (minuteRightNow < eventTime){
        minutesRemaining = Math.abs(minuteRightNow - eventTime);
       }

       else {
         minutesRemaining = Math.abs((fullHour-minuteRightNow) + eventTime);
       }
       element.text(minutesRemaining);
     };

     scope.$watch(attrs.timeToEvent, function(value) {
        eventTime = value;
        updateTimeLeft();
     });

     stopInterval = $interval(updateTimeLeft, 1000);

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

   };
})
.directive('currentTime',
      function($interval, ordinalFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope, element, attrs) {
          var format = 'mm',  // date format
              stopTime; // so that we can cancel the time updates

          // used to update the UI
          function updateTime() {
            var currentMinute = new Date().getMinutes();
            element.text(ordinalFilter(currentMinute));
          }


          // watch the expression, and update the UI on change.
//           scope.$watch(attrs.myCurrentTime, function(value) {
//             format = value;
//             updateTime();
//           });

          stopTime = $interval(updateTime, 1000);

          // listen on DOM destroy (removal) event, and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        };
      })
.filter('ordinal', function() {
  //https://github.com/jdpedrie/angularjs-ordinal-filter
  var ordinal = function(input) {
    // Only process numeric values.
    if (isNaN(input) || input === null) return input;

    var s=["th","st","nd","rd"],
    v=input%100;
    return input+(s[(v-20)%10]||s[v]||s[0]);
  };

  return ordinal;
});
	<!DOCTYPE html>
	<html ng-app="countdown">
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body{
	font-family: "Avenir Next",sans-serif;
	font-size:36px;
	}
	</style>
	</head>
	<body>
	<div ng-controller="EventController" ng-cloak>
	<p>Currenty we are on the <span current-time></span> minute of the hour</p>
	<hr />
	<div ng-repeat="event in events">
	<p>Event occurs every {{ event \| ordinal }} minute on the hour</p>
	<p>There are <span time-to-event="{{ event }}"></span> minutes remaining for the next event.</p>
	<hr />
	</div>
	</div>
	<script id="jsbin-javascript">
	angular.module('countdown', [])
	.controller('EventController', function($scope, $interval){
	$scope.events = [15,23];
	})
	.directive('timeToEvent', function($interval, ordinalFilter){
	return function(scope, element, attrs){
	var stopInterval;
	var eventTime;
	var minutesRemaining;
	var fullHour = 60;

	var updateTimeLeft = function getTimeLeft(){
	var minuteRightNow = new Date().getMinutes();
	if (minuteRightNow < eventTime){
	minutesRemaining = Math.abs(minuteRightNow - eventTime);
	}

	else {
	minutesRemaining = Math.abs((fullHour-minuteRightNow) + eventTime);
	}
	element.text(minutesRemaining);
	};

	scope.$watch(attrs.timeToEvent, function(value) {
	eventTime = value;
	updateTimeLeft();
	});

	stopInterval = $interval(updateTimeLeft, 1000);

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

	};
	})
	.directive('currentTime',
	function($interval, ordinalFilter) {
	// return the directive link function. (compile function not needed)
	return function(scope, element, attrs) {
	var format = 'mm', // date format
	stopTime; // so that we can cancel the time updates

	// used to update the UI
	function updateTime() {
	var currentMinute = new Date().getMinutes();
	element.text(ordinalFilter(currentMinute));
	}


	// watch the expression, and update the UI on change.
	// scope.$watch(attrs.myCurrentTime, function(value) {
	// format = value;
	// updateTime();
	// });

	stopTime = $interval(updateTime, 1000);

	// listen on DOM destroy (removal) event, and cancel the next UI update
	// to prevent updating time after the DOM element was removed.
	element.on('$destroy', function() {
	$interval.cancel(stopTime);
	});
	};
	})
	.filter('ordinal', function() {
	//https://github.com/jdpedrie/angularjs-ordinal-filter
	var ordinal = function(input) {
	// Only process numeric values.
	if (isNaN(input) \|\| input === null) return input;

	var s=["th","st","nd","rd"],
	v=input%100;
	return input+(s[(v-20)%10]\|\|s[v]\|\|s[0]);
	};

	return ordinal;
	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html ng-app="countdown">
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div ng-controller="EventController" ng-cloak>
	<p>Currenty we are on the <span current-time></span> minute of the hour</p>
	<hr />
	<div ng-repeat="event in events">
	<p>Event occurs every {{ event \| ordinal }} minute on the hour</p>
	<p>There are <span time-to-event="{{ event }}"></span> minutes remaining for the next event.</p>
	<hr />
	</div>
	</div>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">body{
	font-family: "Avenir Next",sans-serif;
	font-size:36px;
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">
	angular.module('countdown', [])
	.controller('EventController', function($scope, $interval){
	$scope.events = [15,23];
	})
	.directive('timeToEvent', function($interval, ordinalFilter){
	return function(scope, element, attrs){
	var stopInterval;
	var eventTime;
	var minutesRemaining;
	var fullHour = 60;

	var updateTimeLeft = function getTimeLeft(){
	var minuteRightNow = new Date().getMinutes();
	if (minuteRightNow < eventTime){
	minutesRemaining = Math.abs(minuteRightNow - eventTime);
	}

	else {
	minutesRemaining = Math.abs((fullHour-minuteRightNow) + eventTime);
	}
	element.text(minutesRemaining);
	};

	scope.$watch(attrs.timeToEvent, function(value) {
	eventTime = value;
	updateTimeLeft();
	});

	stopInterval = $interval(updateTimeLeft, 1000);

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

	};
	})
	.directive('currentTime',
	function($interval, ordinalFilter) {
	// return the directive link function. (compile function not needed)
	return function(scope, element, attrs) {
	var format = 'mm', // date format
	stopTime; // so that we can cancel the time updates

	// used to update the UI
	function updateTime() {
	var currentMinute = new Date().getMinutes();
	element.text(ordinalFilter(currentMinute));
	}


	// watch the expression, and update the UI on change.
	// scope.$watch(attrs.myCurrentTime, function(value) {
	// format = value;
	// updateTime();
	// });

	stopTime = $interval(updateTime, 1000);

	// listen on DOM destroy (removal) event, and cancel the next UI update
	// to prevent updating time after the DOM element was removed.
	element.on('$destroy', function() {
	$interval.cancel(stopTime);
	});
	};
	})
	.filter('ordinal', function() {
	//https://github.com/jdpedrie/angularjs-ordinal-filter
	var ordinal = function(input) {
	// Only process numeric values.
	if (isNaN(input) \|\| input === null) return input;

	var s=["th","st","nd","rd"],
	v=input%100;
	return input+(s[(v-20)%10]\|\|s[v]\|\|s[0]);
	};

	return ordinal;
	});</script></body>
	</html>