Creating dynamic links with Angular.js' ng-repeat
<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>