Simple Angular 1.4.3

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

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <h1>Hello Plunker!</h1>
    <ss-user-info-card></ss-user-info-card>
  </body>

</html>

// Code goes here

angular.module('app', []);

angular.module('app').controller('mainCtrl', function($scope){
  $scope.user={
    name:"Luke Skywalker",
    address:{
      street: 'PO Box 123',
      city:'Secret Rebel Base',
      planet:'Yavin IV'
    },
    friends:[
      'Han',
      'Leia',
      'Chewbacca'
    ]
  }
});

angular.module('app').directive('ssUserInfoCard', function(){
  return{
    templateUrl:"userInfoCard.html",
  }
})

/* Styles go here */

Name: {{user.name}} <br/><br/>
<div ng-show='!!user.address'>Address:<br/>
  {{user.address.street}}<br/>
  {{user.address.city}}<br/>
  {{user.address.planet}}
</div> 
<br/>
<div>Friends: 
  <div ng-repeat='friend in user.friends'>
    {{friend}}
  </div>
</div>