Angular.js format minutes in template

As what Whisher mentioned, a filter is more appropriate in changing the format of your html output.

I have created a filter not long ago, that can convert the given time value based on the unit of measure in time(hours, minutes, seconds) into a specific format that suits the taste of its user.

DEMO

JAVASCRIPT

  .filter('time', function() {

    var conversions = {
      'ss': angular.identity,
      'mm': function(value) { return value * 60; },
      'hh': function(value) { return value * 3600; }
    };

    var padding = function(value, length) {
      var zeroes = length - ('' + (value)).length,
          pad = '';
      while(zeroes-- > 0) pad += '0';
      return pad + value;
    };

    return function(value, unit, format, isPadded) {
      var totalSeconds = conversions[unit || 'ss'](value),
          hh = Math.floor(totalSeconds / 3600),
          mm = Math.floor((totalSeconds % 3600) / 60),
          ss = totalSeconds % 60;

      format = format || 'hh:mm:ss';
      isPadded = angular.isDefined(isPadded)? isPadded: true;
      hh = isPadded? padding(hh, 2): hh;
      mm = isPadded? padding(mm, 2): mm;
      ss = isPadded? padding(ss, 2): ss;

      return format.replace(/hh/, hh).replace(/mm/, mm).replace(/ss/, ss);
    };
  });

HTML USAGE

<!-- 
  65 minutes converted to hh:mm:ss format which is the default format = 01:05:00 
  The parameter 'mm' suggests the the time value(65) is a unit of measure in minutes.
-->
<pre>{{65 | time:'mm'}}</pre>

<!-- 
  65 minutes converted to the OP's desired output = 1h 5m 

  the parameter 'hhh mmm' suggests the format of the output desired
  by the OP, the "hh" and "mm" text are replace with the hour value and
  the minute value

  the last parameter which is a boolean value suggests that the hour(hh), minute(mm),     
  second(ss) values are not padded. E.G. hour = 2 output would be 02. By default, this
  parameter is set to true.
-->
<pre>{{65 | time:'mm':'hhh mmm':false}}</pre>

What about this:

One line solution

<pre>
 with hours: {{ (time.minutes<60) ? 
    (time.minutes) + 'm' : (time.minutes%60==0) ?
     (time.minutes-time.minutes%60)/60 + 'h' :
    ((time.minutes-time.minutes%60)/60 + 'h' + ' ' + time.minutes%60 + 'm') }}
</pre>

Demo 1 Fiddle

Suggested solution

JS

 if($scope.time.minutes < 60){
        $scope.time.result = ($scope.time.minutes) + 'm';        
    }
    else if($scope.time.minutes%60==0){
        $scope.time.result = ($scope.time.minutes-$scope.time.minutes%60)/60 + 'h';        
    }
    else{
         $scope.time.result = (($scope.time.minutes-$scope.time.minutes%60)/60 + 'h' + ' ' + $scope.time.minutes%60 + 'm');
    }

HTML

<pre>with hours: {{ time.result}}</pre>

Demo 2 Fiddle

Test:

minutes = 29 ->  Output '29m'
minutes = 60 ->  Output '1h'
minutes = 123 -> Output '2h 3m'

More suggested way (Directive)

Directive

app.directive('myHours', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            myData: '='
        },
        template: '<pre>with hours: {{myData.result}}</pre>',
        link: function (scope, elem, attrs) {

            var calc = function (time) {
                if (time < 60) {
                    return (time) + 'm';
                } else if (time % 60 == 0) {
                    return (time - time % 60) / 60 + 'h';
                } else {
                    return ((time - time % 60) / 60 + 'h' + ' ' + time % 60 + 'm');
                }
            }

            scope.myData.result = calc(scope.myData.minutes);
        }
    };
});

HTML

<my-hours my-data="time"></my-hours>

Demo 3 Fiddle

(function () {
    'use strict';

    angular
        .module('module_name')
        .filter('minutesToDateTime', minutesToDateTime);

    function minutesToDateTime() {
        return function(minutes) {
            return new Date(1970, 0, 1).setMinutes(minutes);
        };
    }
})();

{{minutes | minutesToDateTime | date:'HH:mm:ss'}}