A directive with scope

<!DOCTYPE html>
<html ng-app="with-scope">

  <head>
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/normalize.css" />
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    
    <script src="script.js"></script>
  </head>

  <body ng-controller='Ctrl'>
    <p>
    The number: {{model.number}}  
    </p>
    
    
    <even-or-odd number="model.number"></even-or-odd>
  </body>

</html>

angular.module('with-scope', []).

controller('Ctrl', function($scope){
  $scope.model = {
    number: 40
  };
}).

directive('evenOrOdd', function($parse){
  return {
    restrict: 'E',
    template: "<input style='width: 40px; display: inline' type='text' ng-model='evenOrOddNumber' /> {{evenOrOdd}}",
  
    link: function(scope, el, attrs){
      var number = $parse(attrs.number);
      
      // assign number to local scope
      scope.$watch(number, function(val){
        scope.evenOrOddNumber = val;
      });
      
      scope.$watch('evenOrOddNumber', function(val){
        // publish whether the number is even or odd
        scope.evenOrOdd = (val % 2) ? 'odd' : 'even';
        
        // sync number with outer scope
        number.assign(scope, val);
      });
    }
  }
});