AngularJS date Difference in HTML

Why without moving to controller?

<div ng-app="myApp" ng-controller="myCtrl">
<input type="date" ng-model="fromDate" />
<input type="date" ng-model="toDate" />

<input type="number" ng-value="difference(fromDate, toDate)"> 
</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
   $scope.difference = function (fromDate, toDate) {
        if (fromDate && toDate) {
            return Math.round(Math.abs((new Date(fromDate).getTime() - new Date(toDate).getTime())/(24*60*60*1000)));
        }
   }
});
</script>

If you create some filter where, you find out difference.

myApp.filter('dateDiff', ['$filter', function($filter)
{
    return function(endDate,startDate)
    {
        if(endDate == null || startDate === null){ return ""; }
        var start = moment(startDate);
        var end = moment(endDate);
        var dif = end.diff(start,'days');

        return diff;
    };
}]);

Internally I am using moment.js in above answer or

you can use some ready made lib like angular-moment

Get the difference between two dates in milliseconds. Parameters are date, units and usePrecision. Date defaults to current date. Example:

<span>Difference: {{ dateFrom | amDifference : dateTo : 'days' }} days</span>

In my opinion the best approach to achieve this is create filter

angular.module('myApp')
    .filter('dateDiff', [function() {
        return function dateDiffFilter(dateTo, dateFrom) {
            //TODO: logic of date diff
            return dateTo - dateFrom;
        };
    }]);

and then you can use it anywhere in html in this way:

<input type="date" ng-model="fromDate" />
<input type="date" ng-model="toDate" />

<input type="number" value="{{ fromDate|dateDiff:toDate}}"> 
</div>

Moving to controller will help you to do more logics and condition. Please check the following answer. Since date will be in the mm/dd/yyyy format, I have converted the string to date.

  <div ng-controller="myController">
    <input type="date" ng-model="fromDate" ng-change="calculateDifference(fromDate, toDate)"/>
    <input type="date" ng-model="toDate" ng-change="calculateDifference(fromDate, toDate)"/>

    <input type="number" ng-model="dateDifference.noOfDays"> 
    </div>
    <script>

    app.controller('myController', function($scope) {
$scope.dateDifference={noOfDays:-1};
       $scope.calculateDifference= function (fromDate, toDate) {
            var pattern = /(\d{2})\/(\d{2})\/(\d{4})/; 
            var date1=new Date(fromDate.replace(pattern,'$3-$1-$2'));
           var date2=new Date(toDate.replace(pattern,'$3-$1-$2'))
         $scope.dateDifference.noOfDays=date1-date2;
       }
    });
    </script>