scope $scope

gistfile1.js

.directive('mailBox', function(OneMessage){
  return {
    restrict: 'E',
    templateUrl: './ui/messages/mailbox.html',
    scope: {
      messages: '=messages'
    },
    //wow this actual works, scope is $scope?
    link: function(scope, element, attrs) {
      scope.getMessage = function(id) {
        OneMessage(id).then(function(data){
          scope.activeMessage = data;
        })
      }
    }
  }

//template

<div class='row'>
  <div class='col-md-3'>
    <h5>Messages</h5>
    <ul>
      <li ng-repeat='message in messages' ng-click='getMessage(message.id)'>{{message.subject}}</li>
    </ul>
  </div>
  <div class='col-md-9'>
    <div ng-if='!activeMessage'>
      <p>Click on a message on the left to read it</p>
    </div>
    <div ng-if='activeMessage'>
      <h4>{{activeMessage.subject}}</h4>
      <h6>From: {{activeMessage.username}}</h6>
      <p>{{activeMessage.body}}</p>
    </div>
  </div>
</div>