Attempting to access angular model via array

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

  <head>
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="AppCtrl">
      Name: {{ profile.exploits[0].name }}<br/>
      Year: {{ profile.exploits[0].year }}<br/>
      Duration: {{ profile.exploits[0].duration }} months
    </div>
  </body>

</html>

// Code goes here

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

app.controller('AppCtrl', ['$scope',
  function($scope) {
    // The data is coming in from the API in a similar format.
    // There is an array with objects in it, and we need 
    // display and/or edit those individual records
    // This is a way simplified version of it
    // (and nothing like the real data, haha)
    $scope.profile = {
      name: "Alexander",
      location: "Earth",
      exploits: [
        {name: "Conquer Achaemenid empire", year: "334 BC", duration: 3},
        {name: "Conquer the Balkans", year: "335 BC", duration: 4},
        {name: "Conquer the Persian Empire", year: "334 BC", duration: 6}
      ],
    }
    // I planned to set this with a parameter /profile/exploits/1
    e = 1;
  }]);

/* Styles go here */