(function(){
'use strict';
angular.module('plunker',['ngMaterial' , 'ngMessages']);
})();
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6" ng-include="'views/calendar.html'">
</div>
<div class="col-sm-6" ng-include="'views/users.html'">
</div>
</div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="controllers/date.controller.js"></script>
<script src="controllers/main.controller.js"></script>
</body>
</html>
/* Put your css in here */
(function(){
'use strict';
angular.module('plunker').controller('mycont', function(){
this.myDate = new Date();
this.isOpen = true;
});
})();
(function() {
'use strict';
angular.module('plunker').controller('MainCtrl', function($scope) {
$scope.users = [
{
"id": "2ff0cbd1-b9cd-45f1-8525-e2164ca75743",
"firstName": "Alexzander",
"lastName": "Langworth",
"email": "Hayley.Gislason31@hotmail.com",
"address": {
"street": "2209 Joannie Burg",
"city": "Port Dixieville",
"zip": "69901",
"state": "DE",
"country": "USA"
},
"dateCreated": "2017-09-02T16:00:55.744Z",
"company": {
"name": "Walsh - Parker",
"website": "http://catalina.biz"
},
"profilePic": "http://lorempixel.com/640/480/technics"
},
{
"id": "1fb390a3-60a0-45fa-84e5-d806830c7de8",
"firstName": "Maymie",
"lastName": "Stanton",
"email": "Jamaal71@gmail.com",
"address": {
"street": "76597 Claudia Estate",
"city": "West Leonelville",
"zip": "65388-8980",
"state": "AR",
"country": "USA"
},
"dateCreated": "2017-09-01T23:08:13.169Z",
"company": {
"name": "Lesch - Hermiston",
"website": "http://walker.info"
},
"profilePic": "http://lorempixel.com/640/480/abstract"
},
{
"id": "d9e71a6a-cfe5-49e0-8a9e-10050511ddeb",
"firstName": "Emmitt",
"lastName": "Leannon",
"email": "Nyasia_Bartell18@hotmail.com",
"address": {
"street": "76012 Aidan Light",
"city": "South Napoleon",
"zip": "49146",
"state": "NE",
"country": "USA"
},
"dateCreated": "2017-09-02T12:37:15.625Z",
"company": {
"name": "Considine LLC",
"website": "http://dagmar.org"
},
"profilePic": "http://lorempixel.com/640/480/animals"
},
{
"id": "0dafbe7a-eaaa-48d2-a39c-b50d0e95f2bb",
"firstName": "Adella",
"lastName": "Fisher",
"email": "Joey_Gibson@gmail.com",
"address": {
"street": "144 Bobbie Lock",
"city": "West Jeromechester",
"zip": "71791-0329",
"state": "WY",
"country": "USA"
},
"dateCreated": "2017-09-02T15:36:24.086Z",
"company": {
"name": "Zieme - Schmeler",
"website": "https://valentin.com"
},
"profilePic": "http://lorempixel.com/640/480/transport"
},
{
"id": "1e817ba4-5323-4fb9-8594-828bff478a6b",
"firstName": "Emmie",
"lastName": "Wolff",
"email": "Quentin8@hotmail.com",
"address": {
"street": "59313 Kuphal Ranch",
"city": "Boylefurt",
"zip": "78181",
"state": "VA",
"country": "USA"
},
"dateCreated": "2017-09-02T00:51:21.004Z",
"company": {
"name": "Jast Group",
"website": "https://willis.com"
},
"profilePic": "http://lorempixel.com/640/480/business"
},
{
"id": "21e45afb-ae2a-44fd-a9c5-e365b5cd0f4b",
"firstName": "Misael",
"lastName": "Stiedemann",
"email": "Arlo48@gmail.com",
"address": {
"street": "80241 Connelly Shores",
"city": "Littleland",
"zip": "01444",
"state": "PA",
"country": "USA"
},
"dateCreated": "2017-09-02T14:12:02.107Z",
"company": {
"name": "Hilpert - Kuhn",
"website": "http://tatum.com"
},
"profilePic": "http://lorempixel.com/640/480/abstract"
},
{
"id": "f7222b90-a0e9-456e-8b96-31f123c01c44",
"firstName": "Dorothea",
"lastName": "Harber",
"email": "Andy_Russel35@hotmail.com",
"address": {
"street": "591 Hagenes Coves",
"city": "South Jarenport",
"zip": "53711",
"state": "IA",
"country": "USA"
},
"dateCreated": "2017-09-02T04:38:59.198Z",
"company": {
"name": "Buckridge - Walsh",
"website": "http://ray.info"
},
"profilePic": "http://lorempixel.com/640/480/transport"
},
{
"id": "c520c71e-97a9-465c-9f4b-c873689a3723",
"firstName": "Donnell",
"lastName": "Feest",
"email": "Kris.Quitzon@hotmail.com",
"address": {
"street": "467 Farrell Place",
"city": "West Katheryn",
"zip": "55632-7103",
"state": "MT",
"country": "USA"
},
"dateCreated": "2017-09-01T22:59:51.482Z",
"company": {
"name": "Beahan, Veum and Baumbach",
"website": "http://joey.net"
},
"profilePic": "http://lorempixel.com/640/480/abstract"
},
{
"id": "96ca8111-3254-4cbf-808f-83ea92d2d2ed",
"firstName": "Teresa",
"lastName": "Koss",
"email": "Vaughn97@yahoo.com",
"address": {
"street": "9639 Bins Pike",
"city": "Joshuahberg",
"zip": "65718",
"state": "MO",
"country": "USA"
},
"dateCreated": "2017-09-02T00:39:56.638Z",
"company": {
"name": "Moore, Bechtelar and Toy",
"website": "http://kody.info"
},
"profilePic": "http://lorempixel.com/640/480/business"
},
{
"id": "a7cc209e-6d5c-4c43-8c02-bfde2938bf91",
"firstName": "Ariane",
"lastName": "Russel",
"email": "Wilma13@yahoo.com",
"address": {
"street": "20357 Javier Well",
"city": "Estrellabury",
"zip": "25979-2349",
"state": "SC",
"country": "USA"
},
"dateCreated": "2017-09-01T19:56:25.263Z",
"company": {
"name": "Dicki, Weissnat and Emard",
"website": "https://braeden.info"
},
"profilePic": "http://lorempixel.com/640/480/nightlife"
}
];
});
})();
<div ng-controller="mycont" ng-cloak>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap></section>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter Date" md-open-on-focus></md-datepicker>
</div>
<div ng-controller="MainCtrl">
<div><input type="search" ng-model="searchbox" placeholder="Search from here" class="form-control"> </div>
<table class="table table-striped">
<thead>
<tr>
<th>Profile Picture</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>City</th>
<th>Company</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in users | filter:searchbox">
<td>
<img ng-src="{{user.profilePic}}" class="img-responsive" style="width:100%;">
</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
<td>{{user.address.city}}</td>
<td>{{user.company.name}}</td>
</tr>
</tbody>
</table>
</div>