How to show model and view differently in AngularJS
<p>I am implementing a functionality in AngularJS.
When the user enters 1.5, In view, it should show as 01:30, but when I fetch this scope value in the controller it should return as 1.5.
I have added code in plunker. Please find here.</p>

<p><strong>Index.html:</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="wbTimeConverter"&gt; 

&lt;head&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;script src="https://code.angularjs.org/1.5.8/angular.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;script src="wbNumberToTime.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body ng-controller="AppController"&gt;
  &lt;h1&gt;Hello Plunker!&lt;/h1&gt;
  &lt;input type="text" md-maxlength="5" wb-number-to-time-convert ng-model="task" placeholder="task" ng-blur="onDataChange();" /&gt;

  &lt;input type="text" md-maxlength="5" wb-number-to-time-convert ng-model="project" placeholder="project" ng-blur="onDataChange();" /&gt;

  &lt;br&gt;
  &lt;label&gt;Task : {{task}}&lt;/label&gt;&lt;br&gt;
  &lt;label&gt;Project : {{project}}&lt;/label&gt;&lt;br&gt;
  &lt;label&gt;TotalResult : {{totalHours}}&lt;/label&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><strong>Controller - Script.js</strong></p>

<pre><code>var app = angular.module('wbTimeConverter', []);

app.controller('AppController', function($scope) {
  $scope.onDataChange = onDataChange;

function onDataChange(){
  console.log("res");
  $scope.totalHours= parseFloat($scope.task) + parseFloat($scope.project, 10);
}


});
</code></pre>

<p><strong>directive:</strong></p>

<pre><code>// 'use strict';
// /**
//  * This directive is convert number into hours and minutes format-HH:MM
//  * This will trigger when we change value in input element and gives respective value in time format
//  */

app.directive('wbNumberToTimeConvert', function ($filter, $browser) {
  return {
    require: 'ngModel',
    link: function ($scope, $element, $attrs, ngModelCtrl) {
      var listener = function () {
        var value = $element.val();
        var result = convertToTime(value);
        $element.val(result.timeFormat);
        $element.attr('attr-hrs', result.decimalFormat);
      };

      // This runs when we update the text field
      ngModelCtrl.$parsers.push(function (viewValue) {
        return viewValue;
      });

      $element.bind('change', listener);
      $element.bind('keydown', function (event) {
        var key = event.keyCode;
        // FIXME to handle validations
      });

      $element.bind('paste cut', function () {
        $browser.defer(listener);
      });

      function convertToTime(value) {
        var res = { 'timeFormat': '', 'decimalFormat': '' };
        var inputValue = value;
        if (inputValue.indexOf(':') &gt; -1) {
          inputValue = convertToNumberFormat(inputValue);
          res.decimalFormat = inputValue;
        } else {
          res.decimalFormat = value;
        }

        inputValue = inputValue.split('.');
        var hoursValue = inputValue[0];
        if (inputValue.length &gt; 1) {

          var hrs = parseInt(hoursValue, 10);
          hrs = isNaN(hoursValue) ? 0 : hrs;
          hrs = (hrs &lt; 10) ? '0' + hrs : hrs;

          var minutesValue = inputValue[1];
          var mins = parseInt(minutesValue, 10);
          mins = (minutesValue.length &lt; 2 &amp;&amp; (mins &lt; 10)) ? Math.round(mins * 6) : Math.round(mins * 0.6);
          mins = (mins &lt; 10) ? ('0' + mins) : mins;
          inputValue = hrs + ':' + mins;
          res.timeFormat = inputValue;
        } else {

          inputValue = (parseInt(inputValue, 10) &lt; 10) ? '0' + parseInt(inputValue, 10) : parseInt(inputValue, 10);
          inputValue = inputValue + ':' + '00';
          res.timeFormat = inputValue;
        }
        return res;
      }

      function convertToNumberFormat(inputValue) {
        var timeValue = inputValue.split(':');
        var hours = parseInt(timeValue[0], 10);
        var mins = parseInt(timeValue[1], 10);
        if (isNaN(hours)){
          hours = '00';
        }
        if (isNaN(mins)) {
          mins = '00';
        }
        mins = Math.round(mins / 0.6);
        if (mins &lt; 10) {
          mins = '0' + mins;
        }
        var number = hours + '.' + mins;
        return number;
      }

    }

  };
});
</code></pre>

<p>Here is the plunker link:
<a href="https://plnkr.co/edit/76lwlnQlGC0wfjixicCK?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/76lwlnQlGC0wfjixicCK?p=preview</a></p>

<p>On textbox blur, it is working fine of value differ in View and Controller on first time and from second time on blur in textbox, it is showing same value 01:30 in both view and controller. How can I resolve it?</p>