AngularJS using a custom date filter

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <script data-require="angular-route@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular-route.js"></script>
    <script data-require="angular-resource@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular-resource.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Structuring the code in your AngularJS app</h1>
    <p>
      Our goals are to create code that is testable, reusable, and easy to maintain.
    </p>
    <p>
      Separate your Object types into separate files.  Apps, Controllers, Services, Directives, Filters.
    </p>
    <p>
      Use Dependency Injection to only load what you need into your Controller.
    </p>
    <div ng-view></div>
  </body>

</html>

// Instantiate the app, the 'myApp' parameter must match what is in ng-app
var myApp = angular.module('myApp', ['ngRoute', 'ngResource']);

/**
 * This is the configuration for the routes
 * Maps a URL fragment to a template and controller
 */
myApp.config(function($routeProvider) {
  $routeProvider.
    when('/adults', {
      templateUrl: 'adult-list.html',
      controller: 'PersonCtrl'
    }).
    when('/adults/:adultId', {
      templateUrl: 'adult-detail.html',
      controller: 'PersonDetailCtrl'
    }).
    otherwise({
      redirectTo: '/adults'
    });
});

/**
 * Adult is a service that calls a REST API
 * It's not really a REST API, but just calling our local .json file as an example
 * If you call Adult.query(), it will GET adults.json
 * If you call Adult.get({}, {aid: 1}) it will GET adults/1.json
 */
myApp.factory('Adult', function($resource) {
  return $resource('adults/:adultId.json', {adultId: '@aid'});
});

/**
 * We can add a custom date filter that still uses the built-in date filter
 * The reason for a custom filter is that our date starts off like:
 * mm/dd/yyyy
 * and not the epoch time in microseconds or other standard date format that
 * the date filter expects.
 */
myApp.filter('formatDate', function($filter) {
  return function (myDate) {
    if(typeof myDate === 'undefined') {
      return myDate;
    }
    var dateTokens = myDate.split("/");
    var month = parseInt(dateTokens[0]) - 1;
    var day = parseInt(dateTokens[1]);
    var year = parseInt(dateTokens[2]);
    var jsDate = new Date(year, month, day, 0, 0, 0, 0);
    
    return $filter('date')(jsDate.getTime(), 'fullDate');
  };
});

/**
 * Create the controller that lists
 * Using route it is hooked into DOM using ng-view directive
 */
myApp.controller('PersonCtrl', function ($scope, Adult) {
  $scope.adults = Adult.query();
});

/**
 * Create the controller for the detail view
 * Using route it is hooked into DOM using ng-view directive
 */
myApp.controller('PersonDetailCtrl', function ($scope, $routeParams, Adult) {
  $scope.adultId = $routeParams.adultId; 
  $scope.adult = Adult.get({}, {aid: $routeParams.adultId});

  $scope.saveAdult = function(adult) {
    adult.$save();
  }; 
});

body {
  font-size: 24px;
}

<div ng-repeat="adult in adults">
  <div><a href="#/adults/{{adult.aid}}">Name: {{adult.name}}</a></div>
</div>

<div>Birthday: {{adult.birthday | formatDate}}</div>
<div>Happy?: <input type="checkbox" ng-model="adult.happy" ng-change="saveAdult(adult)"/></div>

[
  {
    "aid": 1,
    "name": "Adult One",
    "birthday": "1/1/1991",
    "happy": true
  },
  {
    "aid": 2,
    "name": "Adult Two",
    "birthday": "2/2/1991",
    "happy": true
  },
  {
    "aid": 3,    
    "name": "Adult Three",
    "birthday": "3/3/1991",
    "happy": false
  }
]

{
  "aid": 1,
  "name": "Adult One",
  "birthday": "1/1/1991",
  "happy": true
}

{
  "aid": 2,
  "name": "Adult Two",
  "birthday": "2/2/1991",
  "happy": true
}

  {
    "aid": 3,    
    "name": "Adult Three",
    "birthday": "3/3/1991",
    "happy": false
  }