Angularjs, ng-view scope

Question

I have a plunker here - http://plnkr.co/edit/PzSvKD9M4l1MKjlYluYm?p=preview

I'm using demo json here - https://api.myjson.com/bins/1hdr5

I'm using ng-view and ngRoute to display two pages.

The first is a list of stories/posts pulled from a json file. This displays part of the content in the json file - I have limited the amount of text.

I'd like to able to click on these and to open a new view that displays the full content of that story/post clicked.

I have added a story.html that opens when the story/post is clicked on the first view.

My problem is comnecting the scope to the story.html view. I need to know the correct part of the josn to load to match the story/post that is clicked.

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

app.service('myService', function ($http, $q) {

    var deferred = $q.defer();
    $http.get('https://api.myjson.com/bins/1hdr5').then(function (data) {
        deferred.resolve(data);
    })

    this.getStory = function () {
        return deferred.promise;
    }
})

    .controller('myCtrl', function ($scope, myService) {
    var promise = myService.getStory();
    promise.then(function (data) {
        $scope.stories = data.data.stories;
    })

})

/* 
    .controller('storyCtrl', function ($scope, myService) {
    var promise = myService.getStory();
    promise.then(function (data) {
        $scope.stories = data.data.stories;
    })

}) */


    .config(function ($routeProvider) {
    $routeProvider

    // route for the home page
    .when('/', {
        templateUrl: 'home.html',
        controller: 'myCtrl'
    })

        .when('/story', {
        templateUrl: 'story.html',
        controller: 'storyCtrl'
    })

});

Answer 1

If you have different title of each story, then in each story inside ng-repeat, in href you can pass the title too in the link. You have to declare a variable for title in route file after /story and then you can catch the value of dynamic title by $routeparams service.

your href will be like this

data-ng-href="#story/{{story.Title}}"

your route will be like this:

.when('/story/:title'

in story controller you can catch the title like this:

$scope.selectedTitle = $routeParams.title

based on catched title you can take the selected story in array of objects containing stories and show it to html

see the updated plunker: http://plnkr.co/edit/b712OernQ8bNb6qUMEdx?p=preview