emailListing.html

<div><h1>hi</h1></div>

home.html

<div class="small-4 columns sidebar" ng-controller="MailListingController">
  <input type="number" placeholder="Filter by years" ng-model="nYearsAgo" id="searchbox" />
  <ul id="emailListing">
    <!-- orderBy:arg:true set's reverse=true -->
    <li email-listing email="mail" action="setSelectedMail(selectedMail)" ng-repeat="mail in ( email | orderBy:'sent_at':true | filter:searchPastNYears )">
    </li>
  </ul>
</div>

<div class="small-8 columns contentArea" ng-controller="ContentController">
  <div ng-show="!selectedMail">
    <h1>No email selected</h1>
  </div>
  <div ng-show="selectedMail">
    <form id="replyForm" ng-submit="sendEmailReply()" ng-show="showingReply">
      <div class="row collapse">
        <div class="small-1 columns">
          <span class="prefix">To</span>
        </div>
        <div class="small-11 columns">
          <input ng-model="reply.to" type="email" placeholder="">
        </div>

        <div class="small-12 columns">
          <textarea ng-model="reply.body">{{ reply.body }}</textarea>
        </div>
      </div>

      <button class="button radius" ng-click="sendReply()">Send</button>
      <button class="button radius alert" ng-click="toggleReplyForm()">Cancel</button>
    </form>
    <div class="row header">
      <div class="small-6 columns">
        <strong>Subject:</strong>
        {{ selectedMail.subject }}
      </div>
      <div class="small-6 columns">{{ selectedMail.sent_at | date:'MM/dd/yy' }}</div>
    </div>
    <div class="row actions">
      <div class="small-8 columns">
        <br />
        <strong>From:</strong>
        {{ selectedMail.from.join(", ") }}<br />
        <strong>To:</strong>
        {{ selectedMail.to }}
      </div>
      <a ng-click="toggleReplyForm()" class="button radius push-1">Reply</a>
    </div>
    <div class="small-12 columns" ng-bind="selectedMail.body">
    </div>
  </div>
</div>

main.js

var app = angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: "templates/home.html",
    controller: "HomeController"
  })
  .when('/settings', {
    templateUrl: 'templates/settings.html',
    controller: 'SettingsController'
  })
  .otherwise({ redirectTo: '/' });
});

//services must return objects
app.service('mailService', ['$http', '$q', function($http, $q) {
  var getMail = function() {
    return $http({
            method: 'GET',
            url: '/api/mail'
          });
  };

  var sendEmail = function(mail) {
    var d = $q.defer();
    $http({
      method: 'POST',
      data: 'mail',
      url: '/api/send'
    }).success(function(data, status, headers) {
      d.resolve(data);
    }).error(function(data, status, headers) {
      d.reject(data);
    });
    return d.promise;
  };

  return {
    getMail: getMail,
    sendEmail: sendEmail
  };
}]);

app.controller('HomeController', function($scope) {
  $scope.selectedMail;

  $scope.setSelectedMail = function(mail) {
    $scope.selectedMail = mail;
  };

  $scope.isSelected = function(mail) {
    if($scope.selectedMail) {
      return $scope.selectedMail === mail;
    }
  };
});

// directive that builds the email listing
app.directive('emaillisting', function() {
  return {
    restrict: 'EA', // E- element A- attribute C- class M- comment
    replace: false, // whether angular should replace the element or append
    scope: { // may be true/false or hash. if a hash we create an 'isolate' scope
      email: '=', // accept an object as parameter
      action: '&', // accept a function as a parameter
      shouldUseGravatar: '@' // accept a string as a parameter
    },
    templateUrl: '/templates/emailListing.html'
  }
});

app.controller('MailListingController', ['$scope', 'mailService', function($scope, mailService) {
  $scope.email = [];
  $scope.nYearsAgo = 10;

  mailService.getMail()
  .success(function(data, status, headers) {
    $scope.email = data.all;
  })
  .error(function(data, status, headers) {
  });

  $scope.searchPastNYears = function(email) {
    var emailSentAtDate = new Date(email.sent_at),
        nYearsAgoDate = new Date();

    nYearsAgoDate.setFullYear(nYearsAgoDate.getFullYear() - $scope.nYearsAgo);
    return emailSentAtDate > nYearsAgoDate;
  };
}]);

app.controller('ContentController', ['$scope', 'mailService', '$rootScope', function($scope, mailService, $rootScope) {
  $scope.showingReply = false;
  $scope.reply = {};

  $scope.toggleReplyForm = function() {
    $scope.reply = {}; //reset variable
    $scope.showingReply = !$scope.showingReply;
    console.log($scope.selectedMail.from);
    $scope.reply.to = $scope.selectedMail.from.join(", ");
    $scope.reply.body = "\n\n -----------------\n\n" + $scope.selectedMail.body;
  };

  $scope.sendReply = function() {
    $scope.showingReply = false;
    $rootScope.loading = true;
    mailService.sendEmail($scope.reply)
    .then(function(status) {
      $rootScope.loading = false;
    }, function(err) {
      $rootScope.loading = false;
    });
  }

  $scope.$watch('selectedMail', function(evt) {
    $scope.showingReply = false;
    $scope.reply = {};
  });
}]);

app.controller('SettingsController', function($scope) {
  $scope.settings = {
    name: 'harry',
    email: "me@me.com"
  };

  $scope.updateSettings = function() {
    console.log("updateSettings clicked")
  };
});