<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery@2.0.3"></script>
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <h3>Angular directive bind!</h3>
    
    <div ng-controller="main">
      
      <div>Nome: <span ng-bind="dados.nome"></span></div>
      
      <div>O Nome: <input type="text" ng-my ng-my-model="dados.nome"/></div>
      
      <div>Outro input: <input type="text" ng-model="dados.nome"/></div>
      
    </div>
    
  </body>

</html>

// MODULO


angular.module('my-module', [])
.directive('ngMy', function() {
  return {
    restrict: 'A',
    scope: { ngMyModel: '=' },
    link: function(scope, el, attrs) {
        scope.$watch('ngMyModel', function (val) {
          el.val(val);
        });
        el.on('change input', function() {
          scope.$apply(function(scope) {
              scope.ngMyModel = el.val();
          });
        });
    }
  };
});

// MAIN

var APP = angular.module('app', ['my-module']);

APP.controller('main', function($scope) {
  
  $scope.dados = { nome: 'nome1' };
  
});
/* Styles go here */