Directive Sample

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="TestApp">
    <div ng-controller="TestCtrl">
        <table>
            <tr>
                <td>Hourly:</td>
                <td>
                    <input ng-model="BasicPay.Hourly" onkeypress='validate(event)' />
                </td>
            </tr>
            <tr>
                <td>Daily:</td>
                <td>
                    <input ng-model="BasicPay.Daily" onkeypress='validate(event)' />
                </td>
            </tr>
            <tr>
                <td>Monthly:</td>
                <td>
                    <input ng-model="BasicPay.Monthly" onkeypress='validate(event)' />
                </td>
            </tr>
        </table>
        
        <br />
        
        <pre>{{ BasicPay | json }}</pre>
    </div>
</div>

JavaScript

var app = angular.module('TestApp', []);

app.controller('TestCtrl', ['$scope', function($scope){
    var daysInYear = 256;
    var hoursInDay = 9;
    
    $scope.BasicPay = {
        Hourly: 0,
        Daily: 0,
        Monthly: 0
    }
    
    /*$scope.$watch('BasicPay.Hourly', function(e){
        $scope.BasicPay.Daily = e * hoursInDay;
        $scope.BasicPay.Monthly = (e * hoursInDay) * (daysInYear / 12);
    });*/
    
    $scope.$watch('BasicPay.Daily', function(e){
        $scope.BasicPay.Hourly = e / hoursInDay;
        $scope.BasicPay.Monthly = e * (daysInYear / 12);
    });
    
   /* $scope.$watch('BasicPay.Monthly', function(e){
        $scope.BasicPay.Hourly = (e / (daysInYear / 12)) / hoursInDay;
        $scope.BasicPay.Daily = e / (daysInYear / 12);
    });*/
}]);







function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
    var regex = /[0-9]|\.{1}/;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}