Header angular

directives.js

module.directive('header', function () {
    return {
        restrict: 'A', //This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
        replace: true,
        scope: {user: '='}, // This is one of the cool things :). Will be explained in post.
        templateUrl: "/js/directives/header.html",
        controller: ['$scope', '$filter', function ($scope, $filter) {
            // Your behaviour goes here :)
        }]
    }
});

footer.html

<div>
  <p>
    This part of the hader is always here
  </p>
  <p ui-if="user">
    User {{user.name}} is logged in :D
  </p>
  <p ui-if="!user">
    Hey buddy, log in! Be cool
  </p>
</div>