How do i pass an item between views with AngularJS?

Vote count:

0

I'm playing around with ngRoute and Angular and it seems that I have an issue when trying to chose an item in a view, in order to go to a details page with the coshed item:

<h1>Select Item</h1>
<ul>
   <li ng-repeat="item in vm.items">
      <a ng-click="vm.setSelectedItem(item)" ng-href="#/first/{{item.id}}">
           {{item.thing}}
      </a>
  </li>
</ul>

How come the vm.selectedItem is not rendered/shown on the "details" page?

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

app.config(function($routeProvider){
    $routeProvider
    .when('/first', { 
        templateUrl: 'first.html', 
        controller: 'FirstCtrl',
        controllerAs:'vm' 
    })
    .when('/first/:id', {
        templateUrl: 'firstWithItem.html', 
        controller: 'FirstCtrl',
        controllerAs:'vm'
     })
    .otherwise({ 
        redirectTo: '/first' 
    });
});

app.controller("FirstCtrl", function() {
    var vm = this;

    vm.items = [{id:1, thing:"Beer"},{id:2, thing:"Grass"}];
    vm.selectedItem = null;
    vm.setSelectedItem = SetSelectedItem;

    function SetSelectedItem(item) {
        this.selectedItem = item;
    }
});

Link to JSfiddle Here

asked 38 secs ago

getJETsetTER

404

How do i pass an item between views with AngularJS?