Passing User Data from PHP/HTML to AngularJS

I am new to AngularJS and am still learning but I didn't see this question asked anywhere on this site. I am building a traditional html/php list website that passes data such as a list id from an index page to a list page (listr.npctimes.com).

After some initial playing with angularJS I realized that it's strength is on a single page web app so I stopped trying to fit it with the entire site and want to create a web app for the user to modify the selected list on the list page. Unfortunately I haven't figured out how to get the list id from the GET data in the url (listr.npctimes.com/list.php?id=1 for example) to the angularJS controller so that the controller can request the list items from the specific list.

PHP/HTML (With AngularJS)

<?php $list_id = $_GET['id']; ?>

<div data-ng-app="listApp" data-ng-controller="listCtrl">
  <ul data-ng-repeat="list in lists | orderBy:'edit_date':true">
    <li>
      <a href="#">{{ list.name }}</a>
    </li>
  </ul>
</div>

Angular JS Controller

listApp.controller("listCtrl", function ($scope, $http) {
  $http.get("http://listr.npctimes.com/php/items.php?list_id=1").success(function (response) {
    $scope.lists = response;
  });
});

Currently the list_id is hardcoded in the controller http get request in angularJS but I would like to get the PHP list_id variable to the angularJS controller so that I can use it to request the items from the proper list to set up the web app in the first place.

The items.php file returns simple JSON which looks like

[{"id":"1","list_id":"1","name":"Renew Truck Registratiion","create_date":"September 2, 2014 07:20 PM","edit_date":"November 30, -0001 12:00 AM","checked":"0","rank":"0","notes":""},{"id":"2","list_id":"1","name":"Rental Showing on Thursday","create_date":"September 2, 2014 07:20 PM","edit_date":"November 30, -0001 12:00 AM","checked":"0","rank":"0","notes":""}]

and can be loaded at http://listr.npctimes.com/php/items.php?list_id=1

What I've Tried

I found a couple posts on using the location variable to try to pull the get variable out of the url but whenever I try to use location it crashes the entire controller.

I have also tried using php to set the value of a hidden element in the HTML and pull it out using jQuery in the angularJS controller but this has resulted in an "undefined" variable.

Any help is appreciated! Thanks!

You shouldn't use <?php ... ?> or link to PHP site or something like that in your Angular front-end, because once you decide to use Angular, its mean all your front-end is built with Angular, PHP is server side language. Just send request to server side, then receive data and display...

To passing passing/getting parameters, you can config in $routeProvider.

In your app.js:

angular.module('exampleApp', [
  'ngRoute'  
])
.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        action: 'home'
      })
      .when('/list/:itemId', {
        templateUrl: 'views/item.html',
        action: 'lists'
});
});

Then, after you loaded the list into your home page, you can set href for each item:

<div data-ng-app="exampleApp" data-ng-controller="listCtrl">
  <ul data-ng-repeat="list in lists | orderBy:'edit_date':true">
    <li>
      <a href="#/list/{{list.id}}">{{ list.name }}</a>
    </li>
  </ul>
</div>

Now in your itemCtrl, you can handle the list id by $routeParams provider

angular.module('exampleApp.controllers', [])
    .controller('itemCtrl', function ($scope, $sce, $route, $routeParams, $http){   
      $scope.$on("$routeChangeSuccess", function( $currentRoute, $previousRoute ){
          if( $routeParams.itemId ){
             // use http to get the item which has id = $routeParams.itemId

          }
       });
});

Hope this help, any problems you can post as the comment