The right way to display one to many models using Angular and Rails

To get better understanding of how Angular works with Rails I am
creating a simple todo app.This is my first week with Angular and I have
no idea how to use it correctly with rails.

An idea is following. I have a list of todos and when I click on todo I
get a list of tasks below which are associated with this todo list. You
can take a look on attached picture, maybe it will explain better what I
am trying to say here.

DB:
One "todo" has many "tasks". todo_id is a FK in the task model.

This is what I've done to display all todos:
<div data-ng-repeat="todo in todos" class="row todo" >
    <h2 class="col-xs-10" ng-click="changeVisibleState(todo.id)">
        {{todo.title}}
    </h2>
     <i ng-click="deleteTodo(todo.id)" class="glyphicon glyphicon-trash
col-xs-2"/>
     <div class="col-md-6 col-md-offset-2" ng-if="visible(todo.id)">
        <div data-ng-repeat="task in todo.tasks" id="tasks"
class="task">
            <h3 class="col-xs-10">{{task.title}}</h3>
            <i class="glyphicon glyphicon-trash"
ng-click="deleteTask(task.id, todo.id)"/>
        </div>
      <-- form -->
      </div>
</div>

As you see so far I get a list of tasks from todo but if I add a task or
delete one I have to reload a todo and I have no idea how to update html
on flight using Angular.

This is how I delete a todo (I hope it is not very ugly :slight_smile:
  Todo = $resource("/api/todos/:id", {id: "@id"}, {update: {method:
"PUT"}})
  $scope.todos = Todo.query()

  $scope.deleteTodo = (id) ->
    todo = (item for item in $scope.todos when item.id is id)[0]
    Todo.remove(todo)
    $scope.$apply(removeFromArray($scope.todos, todo))

I would really appreciate if someone could give me a good example of how
Angular lives with Rails and how to use "Angular.resource" correctly.
Meanwhile I will be praying and reading angular sources :slight_smile:

Attachments:
http://www.ruby-forum.com/attachment/10800/tasks.png

If somebody is interested in solution - the easiest way to use properly
$resource

Task = $resource("/api/todos/:todo_id/tasks/:id", {todo_id: "@todo_id",
id:"@id"}, {update: {method:"PUT"}})

Task.query([params], success, error)
Task.save([params], postData, success, error)

as example

Task.save({todo_id:1,id:23}, {title:"new task", todo_id:1})