Angular trNgGrid with Form Databinding on Gid Row

Question

I am using TrNgGrid

The idea is to update the form controls whenever a row is selected in the grid.

My form UI is

    <table ng-controller="moduleController" class="table table-responsive table-striped">
        <tr>
            <td>
                <label for="moduleid" class="col-md-2">Module ID : </label>
                <div class="form-group  col-md-3">

                    <input type="text" id="moduleid" name="moduleid" ng-model="hdr.moduleid" value="" class="form-control">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <label for="modulename" class="col-md-2">Module Name : </label>
                <div class="form-group col-md-4">
                    <input type="text" id="modulename" name="modulename" ng-model="hdr.modulename" value="" class="form-control">
                </div>
            </td>
        </tr>

    </table>

And the controller is

var ap = angular.module('myApp', ['trNgGrid', 'ngRoute']);

ap.controller("moduleController", function ($scope, $http) {
    $scope.hdr = {};

    $scope.hdr.moduleid = "";
    $scope.hdr.modulename = "None";

    $scope.mySelectedItems = [];

    //Action of clicking grid row.
    $scope.$watch("mySelectedItems[0]", function (newVal, oldVal) {
        var val;
        if (newVal != oldVal) {
            if (newVal == undefined && oldVal) val = oldVal;
            else val = newVal;
            alert("Selected Item : " + val.modulename);

            $scope.hdr = val; // CHANGES TO hdr is NOT REFLECTED
            //$scope.$apply(); // causes console error
        }
        alert($scope.hdr.modulename);
    });
});

Although the watch event fires but my ui is not getting updated. What am i missing ?

Here is a JS fiddle to get you started

EDIT : The irony is that it works in JSFiddle but not in my project. The value of hdr is duely updated. But the controls are not.