HTML snippet in Angular partial missing in view

Question

I have a block of HTML in an Angular partial that's not making it into the view for some reason. Every other line of HTML in the partial (including other lines with data-binding and references to my service and its methods) are making it in. Had a hard time locating previously asked questions that answer this specific issue...

Here's the missing block:

<div ng-controller="PlayerBar.controller" class="player-bar">
  <div class="container">
  <div class="currently-playing player-bar-control-group">
    <h2 class="song-name"> {{ songPlayer.currentSong.name }} </h2>
    <div class="seek-control">
      <slider value="{{playTime}}" max="{{songPlayer.currentSong.length}}" on-change="songPlayer.seek(value)"><slider>
      <div class="current-time">{{ playTime | timecode }}</div>
      <div class="total-time">{{ songPlayer.currentSong.length | timecode }}           </div>
    </div>
    <h3 class="artist-name">{{ songPlayer.currentAlbum.artist }}</h3>
  </div>
</div>

My controller in which my scope variable is defined:

Jams.controller('PlayerBar.controller', ['$scope', 'SongPlayer', function($scope, SongPlayer){
  $scope.songPlayer = SongPlayer;

  SongPlayer.onTimeUpdate(function(event, time) {
    $scope.$apply(function() {
      $scope.playTime = time;
    });
  });
}]);

My service where my method is defined:

Jams.service('SongPlayer', ['$rootScope', function($rootScope) {
  var currentSoundFile = null;
  return {
    onTimeUpdate: function(callback) {
      return $rootScope.$on('sound:timeupdate', callback);
    },
  };
}]);

And my timecode filter:

Jams.filter('timecode', function() {
  return function(seconds) {
    seconds = Number.parseFloat(seconds) 

    if (Number.isNaN(seconds)) {
      return '-:--';
    }

    var wholeSeconds = Math.floor(seconds)
    var minutes = Math.floor(wholeSeconds / 60);
    remainingSeconds = wholeSeconds % 60;
    var output = minutes + ':';

    if (remainingSeconds < 10) {
      output += '0';
    }

    output += remainingSeconds;

    return output;
  }
});

Curious as to why only these lines are left out while others make it in.

Answer 1

You haven't closed your slider element properly