Select some data and then persist to next controller/view in Angularjs

Question

I am bringing in some simple data via a service that uses angular-resource like so:

angular.module('InvoiceService',
                ['ngResource'])

.factory('InvoiceService', function ($resource) {
    return $resource('data.json');
})
.controller("DashboardListCtrl", function (InvoiceService) {
        var vm = this;

 InvoiceService.query(function (data) {
        vm.invoices = data;
 });

    vm.submit = function (form) {
       console.log(form)
    };
});

And the html:

<form name="invoices" role="form" novalidate>
  <ul>
    <li ng-repeat="invoice in vm.invoices">
     <input type="checkbox" id="{{'id-' + $index}}" />
     <p><strong>Order:</strong></p>
     <p>{{invoice.order}}</p>              
    </li>
    <input type="submit" value="Continue" ng-click="vm.submit(invoices)" />
   </ul>
 </form>

Everything works fine; the data is displays in the view as expected. The question: What I'd like to do is be able to select a checkbox, grab the bit of data associated with that checkbox, and pass it along to the next controller/view on submit. How can I do this?

So, what do I do next? Am I on the right track? **EDIT: added all angular code to help clarify

Answer 1

Posting answer as reply too big to be useful.

You should be using $scope to isolate the controller's data from the rest of the page.

Read up about ng-model http://docs.angularjs.org/api/ng/directive/ngModel and how to use it to two-way-bind checkbox value to a controller variable. No need to use theFormName if you call $scope.submit = function() { } as your ng-model variable will be available in $scope already.

angular.module('InvoiceService',
                ['ngResource'])

.factory('InvoiceService', function ($resource) {
    return $resource('data.json');
})
.controller("DashboardListCtrl", function ($scope, InvoiceService) {
 InvoiceService.query(function (data) {
      $scope.invoices = data;
 });
 $scope.submit = function () {
    // FIXME to access a property of each $scope.invoices
    console.log('checkbox1=' + $scope.invoices[0].checkbox1);
 };
});

Then the HTML:

<form role="form" novalidate ng-controller="DashboardListCtrl"><!-- EDIT: added ng-controller=, remove name= -->
  <ul>
    <li ng-repeat="invoice in invoices"><!-- EDIT: remove 'vm.' -->
     <input type="checkbox" id="{{'id-' + $index}}" ng-model="invoice.checkbox1" /><!-- EDIT: added ng-model= -->
     <p><strong>Order:</strong></p>
     <p>{{invoice.order}}</p>              
    </li>
    <input type="submit" value="Continue" ng-click="submit()" /><!-- EDIT: remove 'vm.' -->
   </ul>
 </form>