Angular: Empty Fiddle

http://angularjs.org/

by ncapito

HTML

<script src="&quot;http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.4/angular-resource.js"></script>
<html ng-app='tasks'>
    <div ng-controller="TaskController">
        <select name='lists' ng-model="list" ng-options="t.title for t in lists._lists">
            <option value="">-- chose list --</option>
        </select>
        
<h1>List was  -{{ list.title }}</h1>

        <ul>
            <li ng-repeat="t in lists.lists(list)" class='task'>{{t.title}}: {{t.id}}</li>
        </ul>
    </div>

</html>

JavaScript

angular.module('tasks', ['service']).controller('TaskController',

function ($scope, List) {
    $scope.lists = List.lists();
});

angular.module('service', ['ngResource']).factory('List', function ($http) {
    var List = function (data) {
        if (data.tasks) this._tasks = data.tasks
        else if (data.lists) this._lists = data.lists

        angular.extend(this, data);
    }
    List.lists = function (list_id) {
        if (list_id != undefined) {
            data = {
                "tasks": {
                    "id": list_id,
                        "title": "test task"
                }
            }
        } else {
            data = {
                "lists": [{
                    "id": 1,
                        "title": "test list"
                }, {
                    "id": 2,
                        "title": "test list"
                }]
            }
        }
        return new List(data);
    };
    return List
});