在Angular之外更改时，在ng-click上处理输入值

Question

How to pass input values on ng-click when they changed outside of angular. When I type texts myself all works good but once input got dynamic values, ng-click passes empty form. Here the HTML I'll be using:

<form id="form" action="" style="margin:0;">
    <img src="jCrop/images/imagename.jpg" id="imgcrop"/>
    <input type="text" name="hdnx" id="hdnx" data-ng-model="thumbnail.hdnx" ng-change="alert('test')" />
    <input type="text" name="hdny" id="hdny" data-ng-model="thumbnail.hdny" />
    <input type="text" name="hdnw" id="hdnw" data-ng-model="thumbnail.hdnw" />
    <input type="text" name="hdnh" id="hdnh" data-ng-model="thumbnail.hdnh" />
    <button ng-click="save()">Crop Image & Save Selection</button>
</form>

Here is the AngularJS codes:

angular.module('blogAdmin').controller('ThumbnailsController', ["$rootScope", "$scope", "$location", "$http", "$filter", "dataService", function ($rootScope, $scope, $location, $http, $filter, dataService) {
  $scope.thumbnail = {};
  $scope.save = function () {
    if ($scope.thumbnail) {
        console.log($scope.thumbnail);  //empty log when values changes outside of angular
    }
  }
}]);

Through googling I noticed $scope.$apply(); will help me, if so how to use this in above form.

UPDATE 1

Values are changes through jQuery code sitting on HTML page directly:-

<script type="text/javascript">
    $(function () {
        $('#imgcrop').Jcrop({
            onSelect: getcroparea,
            aspectRatio: 1  //square selection to crop
        });
    })
    function getcroparea(c) {
        $('#hdnx').val(c.x);
        $('#hdny').val(c.y);
        $('#hdnw').val(c.w);
        $('#hdnh').val(c.h);
        console.log(c.h + " : " + c.w);
        $('#selectedSize').html("Selected region " + c.h + "px : " + c.w + "px");
    };
</script>

UPDATE 1

"$scope is not defined" when used

    function getcroparea(c) {
        $('#hdnx').val(c.x);
        $('#hdny').val(c.y);
        $('#hdnw').val(c.w);
        $('#hdnh').val(c.h);
        console.log(c.h + " : " + c.w);
        $('#selectedSize').html("Selected region " + c.h + "px : " + c.w + "px");

        $scope.$apply();
    };

Answer 1

You should wrap both the form and croppable area in a directive. Here you can access the DOM element that you apply the third-party library to and instead of changing the input text value, change it directly on your scope variable.

Answer 2

There maybe easy solution but I solved this using this:

<script type="text/javascript">
$(function () {
    $('#imgcrop').Jcrop({
        onSelect: getcroparea,
        aspectRatio: 1  //square selection to crop
    });
})
function getcroparea(c) {
    $('#hdnx').val(c.x);
    $('#hdny').val(c.y);
    $('#hdnw').val(c.w);
    $('#hdnh').val(c.h);
    console.log(c.h + " : " + c.w);
    $('#selectedSize').html("Selected region " + c.h + "px : " + c.w + "px");

    $scope.thumbnail = { "id": $scope.id, "hdnx": c.x, "hdny": c.y, "hdnw": c.w, "hdnh": c.h, "imgcrop": $scope.firstImageSrc };

};
</script>

$scope.thumbnail = .. is new in above code which assigns the scope variable every-time.