<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container" style="padding-top:50px;">
<display-info></display-info>
</body>
</html>
angular.module('myApp', []);
angular.module('myApp').controller('mainCtrl', function($scope) {
$scope.user = {
name: 'Tony Stark',
alias: 'Iron Man',
address: {
street: '10880, Malibu Point',
city: 'Malibu, Calif',
country: 'United States',
},
teamAffiliation: [
'Avengers', 'S.H.I.E.L.D', 'Stark Industries', 'Guardians of galaxy'
],
abilities: "Genius-level intellect and highly proficient Scientist, Engineer and business man"
}
$scope.callAvengers = function(user) {
user.message = "hey buddy,Avengers will be here shortly!"
}
});
angular.module('myApp').directive('displayInfo', function() {
return {
templateUrl: "displayInfo.html",
restrict: "E"
}
});
/* Styles go here */
<div class="panel panel-primary">
<div class="panel-heading">{{user.alias}}</div>
<br />
<div class="panel-body">
<span style="color:red">Name:{{user.name}}</span>
<div ng-show='user.address'>
<h4>Address:</h4> {{user.address.street}}
<br /> City: {{user.address.city}}
<br /> Country: {{user.address.country}}
</div>
<br /> Team Affiliation:
<ul>
<li ng-repeat="team in user.teamAffiliation">
{{team}}
</li>
</ul>
<div ng-show="user.message">{{user.message}}</div>
<button ng-show="!user.message" class="btn btn-primary" ng-click="callAvengers(user)">Call Avengers</button>
</div>
</div>