Hide or Show an image with Angular js if logged on User belongs to a particular group

Question

I am using SharePoint 2010. If the logged user belongs to Approvers group I would like to show the image else hide the image. I am using Angular js and Jquery for the same. Below is part of my html.

<tr >
 <td style="width: 20%;" data-ng-controller="checkUserGroup">
     <input type="text" id="isuseringroup"/>
    <img data-ng-show="isuseringroup === 1" src="Images/Create.png" style="height: auto; width: 250px;" />
 </td>
</tr>

Below is my angular js code

myApp.controller('checkUserGroup', [function () {
angular.element(document).ready(function () {
        $().SPServices({
        operation: "GetGroupCollectionFromUser",
        userLoginName: $().SPServices.SPGetCurrentUser(),
        async: false,
        completefunc: function (xData, Status) {
            if ($(xData.responseXML).find("Group[Name='Approvers']").length == 1) {
                document.getElementById('isuseringroup').value = "1";
                alert("login inside of the Group user");

            }
            else {
                document.getElementById('isuseringroup').value = "0";
                alert("login outside of the Group user");

            }
        }
    });
});

}]);

The image never shows up. Even if I say data-ng-show="isuseringroup === 0" Please let me know what am I doing wrong. Have already put in 2 hours trying to figure this out.

Answer 1

You have to use ng-model for binding to work.

In your js replace

document.getElementById('isuseringroup').value = "1";

with

$scope.isuseringroup = "1";

You also have to inject $scope in your controller

myApp.controller('checkUserGroup', [function ($scope) {

You don't need the input anymore, but if you want to keep it change it to use ng-model

<input type="text" ng-model="isuseringroup"/>