title: Dynamic links with angularjs and ng-repeat
body: <p>I'm creating an app using fake <a href="http://jsonplaceholder.typicode.com,2" rel="nofollow">JSONplaceholder API</a>. I'm displaying a list of posts and I want the ng-repeated post titles to link to the post view. </p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>    &lt;body layout="column" ng-app="myApp" ng-cloak ng-controller="controller"&gt;
      &lt;h1&gt;{{apptitle}}&lt;/h1&gt;
      &lt;script type="text/ng-template" id="allposts.htm"&gt;
          &lt;a href="#addpost"&gt;
      &lt;button type="button" class="btn btn-primary addbtn" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"&gt;
          Add a post
      &lt;/button&gt;
  &lt;/a&gt;
          View
          &lt;select ng-model="viewby" ng-change="setItemsPerPage(viewby)"&gt;
              &lt;option&gt;9&lt;/option&gt;
              &lt;option&gt;18&lt;/option&gt;
              &lt;option&gt;36&lt;/option&gt;
              &lt;option&gt;100&lt;/option&gt;
          &lt;/select&gt;posts
          &lt;div class="row" ng-repeat="collatedPostList in collatedPosts"&gt;
              &lt;div class="onepost col-xs-4 box" ng-repeat="post in collatedPostList"&gt;
                   &lt;div class="inner"&gt;
                  &lt;a href="#/posts/{{post.indexOf(post)}}"&gt;{{post.title}}&lt;/a&gt;
                  &lt;p&gt;{{post.body | limitTo: 60}}{{post.body.length &lt; 20 ? '' : '...'}}&lt;/p&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="text-center"&gt;
          &lt;ul uib-pagination total-items="totalItems" ng-model="currentPage" class="pagination-sm"
              items-per-page="itemsPerPage" ng-change="pageChanged(currentPage)"&gt;&lt;/ul&gt;
          &lt;/div&gt;
      &lt;/script&gt;
      &lt;script type="text/ng-template" id="posts.htm"&gt;
    &lt;/script&gt;
      &lt;script type="text/ng-template" id="addpost.htm"&gt;
      &lt;form ng-submit="addPost()" class="adding"&gt;
          &lt;input id="titleadd" type="text" name="title" ng-model="newPost.title" placeholder="Add title"&gt;
          &lt;br&gt;
          &lt;input id="textadd" type="text" name="body" ng-model="newPost.body" placeholder="Add some text"&gt;
          &lt;br&gt;
          &lt;button type="submit" ng-click="addAlert(msg,'success')" class="btn btn-primary" id="submit" value="Submit"&gt;
          Post it
          &lt;/button&gt;
          &lt;a href="#allposts"&gt;
          &lt;button type="button" class="btn btn-primary" &gt;
              Go back to post list
          &lt;/button&gt;&lt;/a&gt;
              &lt;br&gt;
          &lt;uib-alert 
                ng-repeat="alert in alerts" 
                type="{{alert.type}}" 
                dismiss-on-timeout="5000" 
                close="alerts.splice($index, 1);"&gt;{{alert.msg}}
      &lt;/uib-alert&gt;    &lt;/form&gt;
    &lt;/script&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>Array.prototype.collate = function(collateSize) {
      var collatedList = [];
  
      if (collateSize &lt;= 0) {
          return [];
      }
      angular.forEach(this, function(item, index) {
          if (index % collateSize === 0) {
              collatedList[Math.floor(index / collateSize)] = [item];
          } else {
              collatedList[Math.floor(index / collateSize)].push(item);
          }
      });
  
      return collatedList;
  };
  
  var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap']);
  
  myApp.config(function($routeProvider) {
      $routeProvider.when('/', {
          templateUrl: 'allposts.htm',
          controller: 'PostsController'
      }).when('/posts', {
          templateUrl: 'posts.htm',
          controller: 'PostController'
      }).when('/addpost', {
          templateUrl: 'addpost.htm',
          controller: 'AddController'
      }).otherwise({
          redirectTo: '/'
      });
  });
  
  myApp.controller('PostsController', function($scope) {});
  
  myApp.controller('PostController', function($scope) {});
  
  myApp.controller('AddController', function($scope) {});
  
  
  myApp.controller('controller', function($scope, $http) {
      $scope.apptitle = "My app";
  
      $http({
          method: 'GET',
          url: "http://jsonplaceholder.typicode.com/posts"
      }).then(function(response) {
          $scope.posts = response.data;
          $scope.viewby = 9;
          $scope.totalItems = $scope.posts.length;
          $scope.currentPage = 1;
          $scope.itemsPerPage = $scope.viewby;
          $scope.maxSize = 5;
          $scope.collatedPosts = getCollatedPosts($scope.posts);
          $scope.newPost = {};
  
  
      function getCollatedPosts(posts) {
          if (!posts) {
              return [];
          }
  
          var paginatedPosts = posts.slice((($scope.currentPage - 1) * $scope.itemsPerPage), (($scope.currentPage) * $scope.itemsPerPage));
          return paginatedPosts.collate(3);
      }
  
      $scope.setPage = function(pageNo) {
          $scope.currentPage = pageNo;
      };
  
      $scope.setItemsPerPage = function(num) {
          $scope.itemsPerPage = num;
          $scope.currentPage = 1; //reset to first page
          $scope.collatedPosts = getCollatedPosts($scope.posts);
      };
  
      $scope.pageChanged = function(currentPage) {
          $scope.currentPage = currentPage;
          $scope.collatedPosts = getCollatedPosts($scope.posts);
      };
          $scope.addPost = function(){
            $http.post("http://jsonplaceholder.typicode.com/posts",{
              title: $scope.newPost.title,
              body: $scope.newPost.body,
              usrId: 1
            })
            .success(function(data, status, headers, config){
              console.log(data);
              $scope.posts.push($scope.newPost);
              $scope.newPost = {};
            })
            .error(function(error, status, headers, config){
              console.log(error);
            });
      };});
  
  
      $scope.alerts = [];
  
      $scope.msg = "Well done! Your post was added";
  
      $scope.addAlert = function(msg, type) {
        $scope.alerts.push({
          msg: msg,
          type: type
        });
      };
  
  });
  </code></pre>
  
  <p>My code is not working. There is 100 ng-repeated posts and I want each post title to link to the post view. Current code links every title to <code>#/posts</code>. I also tried <code>&lt;a href="#/posts/{{post.id}}"&gt;{{post.title}}&lt;/a&gt;</code>, but with no success.
  What is the correct way to do this? </p>
  
  <p>You can see full code <a href="http://codepen.io/summerfreeze/pen/ORVQYz" rel="nofollow">here</a>:</p>