Edit on
<body ng-app="myApp">

	<div ng-controller="MainController">
<h1>{{ message }}</h1>

		<input type="text" ng-model="name">
		<h3>Hello : {{ name }}</h3>
    
    		<h3>List of Pirates</h3>
    <ul>
      <li ng-repeat="pirate in pirates">
        <p>Name : {{ pirate.name }}</p>
        <p>Position : {{ pirate.position }}</p>
      </li>
    </ul>
	</div>

</body>
function mainController($scope) {
  $scope.message = "Hello AngularJS";
  $scope.name = '';
  
  $scope.pirates = [
    {
      "id": 1,
      "username": "goldroger",
      "name": "Gol D. Roger",
      "position": "Pirate King"
    },
    {
      "id": 2,
      "username": "mrzero",
      "name": "Sir Crocodile",
      "position": "Former-Shichibukai"
    },
    {
      "id": 3,
      "username": "luffy",
      "name": "Monkey D. Luffy",
      "position": "Captain"
    },
    {
      "id": 4,
      "username": "law",
      "name": "Trafalgar D. Water Law",
      "position": "Shichibukai"
    },
    {
      "id": 5,
      "username": "shanks",
      "name": "'Red-Haired' Shanks",
      "position": "The 4 Emperors"
    }
	];
};

angular.module('myApp', [])
  .controller('MainController', mainController);
Rerun