javascript - md-dialog not recognizing angular filter -

i using angular material's md-dialog feature having issues getting date filter working. maybe can spot , let me know if have idea on how make work. can see {{item.presentation.end_time}} , {{confsessionobj.session_nr}} working when put angular date filter, doesn't recognize it.

here's code.

js

$scope.showadvanced = function(ev, confsession) {     var sessionid = confsession.id;     $.ajax({         type: "get",         url: "/session-detail.php",         data: {id: sessionid},         success: function(data, response){             data = data.replace(/\\n/g, "\\n")                 .replace(/\\'/g, "\\'")                 .replace(/\\"/g, '\\"')                 .replace(/\\&/g, "\\&")                 .replace(/\\r/g, "\\r")                 .replace(/\\t/g, "\\t")                 .replace(/\\b/g, "\\b")                 .replace(/\\f/g, "\\f");             $scope.returnedobj = json.parse(data);              $mddialog.show({                 locals: { confsessionobj: confsession, returnedobj: $scope.returnedobj },                 controller: dialogcontroller,                 targetevent: ev,                 template:                     '<div class="md-dialog-container">' +                     '<md-dialog aria-label="session detail">' +                     '<form ng-cloak>' +                     '<md-toolbar md-scroll-shrink>'+                     '<div class="md-toolbar-tools">'+                     '<h4 style="color: #fff;">session details</h4>'+                     '</div>'+                     '</md-toolbar>'+                     '<md-dialog-content>'+                     '<md-list-item>'+                     '<div class="md-dialog-content"  id="dialog">'+                     '<p class="md-body-2"><span class="md-custom-title">session title:</span>  {{confsessionobj.session_nr}} - {{confsessionobj.session_name}}</p>'+                     '<table class="table table-bordered table-striped table-hover table-responsive" id="dialogtable">'+                     '<tr id="theader">'+                     '<thead>'+                     '<th>talk title</th>'+                     '<th>start time</th>'+                     '<th>end time</th>'+                     '<th>speaker name</th>'+                     '</thead>'+                     '</tr>'+                     '<tr ng-repeat="item in returnedobj">'+                     '<td>{{item.presentation.title}}</td>'+                     '<td>{{item.presentation.start_time | date: "mm/dd/yyyy  h:mma"}}</td>'+                     '<td>{{item.presentation.end_time | date: "mm/dd/yyyy h:mma"}}</td>'+                     '<td>{{item.speakers.firstname}}&nbsp;&nbsp;{{item.speakers.lastname}}</td>'+                     '</tr>'+                     '</table>'+                     '</div>'+                     '</md-list-item>'+                     '</md-dialog-content>'+                     '<md-dialog-actions layout="row">'+                         '<md-button class="md-raised" ng-click="cancel()">close</md-button>'    +                     '</md-dialog-actions>'+                     '</form>'+                     '</md-dialog>'+                     '</div>',                 parent: angular.element(document.body),                 preservescope: true,                 clickoutsidetoclose:true,                 fullscreen: $scope.customfullscreen             });         },         error: function(e){             console.log(e.message);         }     }); }; function dialogcontroller($scope, $mddialog, confsessionobj, returnedobj) {     $scope.confsessionobj = confsessionobj;     $scope.returnedobj = returnedobj;      $scope.cancel = function() {         $mddialog.cancel();     };  } 

based on information provided, issue experiencing date filter format of date object/string in incorrect format other filters functioning. angular date filter documentation:

date format either date object, milliseconds (string or number) or various iso 8601 datetime string formats (e.g. yyyy-mm-ddthh:mm:ss.sssz , shorter versions yyyy-mm-ddthh:mmz, yyyy-mm-dd or yyyymmddthhmmssz). if no timezone specified in string input, time considered in local timezone.

you'll need have date in 1 of formats ensure can processed. i'd recommend using milliseconds date filter can process in either come in string or number, providing bit more flexibility.

you take date being received , use date.parse() milliseconds, can passed interpolation date filter.

js:

$scope.parsedate = function(date) {     return date.parse(date); } 

html:

<td>{{ parsedate(item.presentation.end_time) | date: "mm/dd/yyyy h:mma" }}</td>

here plunker of functionality working.

hopefully helps!

update:

if need display hours/minutes in 1 interpolation while showing month/day/year in spot, need change date format string argument after still parsing date string receiving server propery date millisecond amount. plunker linked in answer has been updated possible variations date formatting including date format specified in comment time in both military , 12 hour format.

<td>{{ parsedate('2017-05-24 13:10') | date: 'mm/dd/yyyy h:mma' }}</td> // 05/24/2017 1:10pm <td>{{ parsedate('2017-05-24 13:10') | date: 'mm/dd/yyyy h:mma' }}</td> // 05/24/2017 13:10pm <td>{{ parsedate('2017-05-24 13:10') | date: 'h:mma' }}</td> // 13:10pm <td>{{ parsedate('2017-05-24 13:10') | date: 'hh:mma' }}</td> // 13:10pm <td>{{ parsedate('2017-05-24 13:10') | date: 'h:mma' }}</td> // 1:10pm <td>{{ parsedate('2017-05-24 13:10') | date: 'hh:mma' }}</td> // 01:10pm <td>{{ parsedate('2017-05-24 13:10') | date: 'mm/dd/yyyy' }}</td> // 05/24/2017