Angularjs data binding with a data attribute object

Question

I have some json attached to a data attribute on a page. The json data is used to build a table in angularjs. I'm using coffeescript and haml.

    app = angular.module("myApp", [])

    app.controller "TableCtrl", ($scope) ->
      $scope.table =  $("#mydata").data("myjson")


    #table{"ng-app"=>"myApp","ng-controller" =>"TableCtrl"}
      %table
        %tbody
          %tr{"ng-repeat"=>"(i,item) in table" }}"}
            %td {{item.name}}

The page loads the data into a table. Elsewhere on the page the json on the data attribute can be changed by a user with jquery. How can I have 2-way binding between the json data and the table? i.e I want the table to change as the json on the data attribute is changed locally.

Answer 1

What you need is to tell AngularJS to observe $("#mydata").data("myjson") for any changes and then update $scope.table when a change occurs. Try adding the following code to your controller (sorry I don't know coffeescript).

$scope.$watch(
    function () { return $("#mydata").data("myjson");}, 
    function(newJson) {
        $scope.table = newJson;
    },
    true
);