How do I propagate changes done to the DOM with plain JS onto its Angular JS binding?

Question

How do I propagate changes done to the DOM with plain JS onto its Angular JS binding?

I've been trying for hours to get Angular JS to updated its model when changes are made to the DOM elements it represents with plain JavaScript. I'm not sure if I'm just not writing my Angular JS code right or if I'm not approaching the problem correctly.

I have a sortable list with input boxes holding each item's sort value. You can either put the sort order in manually which will re-sort the list or drag & drop items (using JQuery sortable). When you sort items with drag and drop, I update the input value in sortable's update callback function but that doesn't seem to update the Angular JS object bound to that input.

I tried wrapping my JS that manipulates the input value in $scope.$apply but it didn't help.

Here's a fiddle: http://jsfiddle.net/smelly_fish/d9kt9/1/

Here's my JS:

var sortedShippingMethods = [{
    "id": "UPS 2nd Day Air A.M. &reg;",
    "name": "UPS 2nd Day Air A.M. ",
    "sort": "0"},
{
    "id": "UPS 3 Day Select &reg;",
    "name": "UPS 3 Day Select ",
    "sort": "0"},
{
    "id": "UPS Ground",
    "name": "UPS Ground",
    "sort": "2"}];

jQuery(document).ready(function(){

    // Sortable list
    $('#shipping-sort-list').sortable({
        items: 'li',
        axis: 'y',
        containment: 'parent',
        cursor: 'move',
        update: function(event, ui) {
            $scope = angular.element($('#shipping-sort-list')[0]).scope(); 
            $scope.$apply(function(){
                $('#shipping-sort-list input').each(function(i){
                    $(this).attr('value', i+1);
                });
            });
        }
    });
});

function AdminShippingSettingsCtrl($scope) {
    $scope.sortedShippingMethods = sortedShippingMethods;

    $scope.getSortValue = function(sortedShippingMethod) {
        //have to typecast to an int or 3 will show up higher than 23 (string sort ftl)
        var sort = parseInt(sortedShippingMethod.sort, 10);
        return sort;
    }
}

Here's my markup:

<div id="shipping-sort-list" data-ng-app data-ng-controller="AdminShippingSettingsCtrl">
    <ul>
        <li data-ng-repeat="sortedShippingMethod in sortedShippingMethods | orderBy:[getSortValue, 'name']"><input data-ng-model="sortedShippingMethod.sort" type="text" name="sortOrder[{{sortedShippingMethod.id}}]" value="{{sortedShippingMethod.sort}}" /> {{sortedShippingMethod.name}}</li>
</ul>

<p data-ng-repeat="sortedShippingMethod in sortedShippingMethods">Name: {{sortedShippingMethod.name}} Sort Value: {{sortedShippingMethod.sort}}</p>
</div>

javascript
jquery
angularjs
jquery-sortable

Answer 1

If you just want the answer, here you go: http://jsfiddle.net/d9kt9/4/

For an explanation read on. The problem with the current iteration you have is that you're updating the value of the element, but really you need to be updating the scope of the object for each shippingMethod. The value is just a value (weird i know) passed back and forth, but if you update an object (like what i've done) then it's pass by reference, this allows you to affect the main sortedShippingMethods. So while looping through them is the correct thing to do, you can see how I got each's scope like so:

$('#shipping-sort-list input').each(function(i){
    var inputScope = angular.element(this).scope();
    inputScope.sortedShippingMethod.sort = i+1;
});

Then on the data-ng-repeat for the second list, i added the same orderBy you had on the first one:

<p data-ng-repeat="sortedShippingMethod in sortedShippingMethods | orderBy:[getSortValue, 'name']">