I'm currently facing a challenge in Angular where I need to establish a connection between a database object displayed in the html view and its corresponding instance through a json API.
While I have a functioning api and $resource, I am struggling to create a binding that allows updates made in the view to update the Angular model / $resource.
Specifically, my html view is prepopulated with data server-side and contains an ngBind attribute:
<div class="ng-scope" ng-app="Posts">
<div class="ng-scope" ng_controller="PostsCtrl">
<span contenteditable="true" ng-bind="post.1.text">post.1.text value</span>
</div>
</div>
There are multiple instances of these on the page with unique ids. For demonstration purposes, let's consider this as a form text field without 'contenteditable' for now.
The format of the ng-bind attribute is flexible and can be adjusted as needed (e.g., post_1_text or split up entirely).
The structure of the resource factory, written in coffee script, is as follows:
app = angular.module 'Posts', ['ngResource']
app.factory 'Post', ($resource) ->
$resource('/api/posts/:id', {id: '@id'})
app.controller "PostsCtrl", @PostsCtrl = ($scope, Post) ->
$scope.posts = Post.query()
This successfully populates a collection of posts through the API.
My question is, how should the ng-bind attribute be structured to bind the controller and enable updates in the view to be reflected in the API?
(I understand that using ng_repeat: "post in posts" could simplify this, but for the sake of the example, assume I need to find an alternative solution.)
Thank you!
Edit: Here's a jsfiddle that illustrates the concept I'm trying to achieve:
...but I would like the id to bind to the object key 'id' instead of the index in the array.