Angular foreach - null values
<p>I am having an issue where when I try to select multiple devices and add them to a group, the array of selected devices($scope.deviceIDs.push) is not getting the values.  Can anyone see the issue or suggest a different method.   I used <a href="http://www.dotnetawesome.com/2015/12/multiselect-dropdown-with-checkbox-in-angularjs.html" rel="nofollow">http://www.dotnetawesome.com/2015/12/multiselect-dropdown-with-checkbox-in-angularjs.html</a> as template for the service I built.</p>

<p>Here is the angular code.</p>

<pre><code> var MyApp = angular.module('MyApp', ['ui.bootstrap', 'angularjs-dropdown-multiselect']);
MyApp.controller('GroupsController', ['GroupsService', '$scope', '$log', '$uibModal',
function (GroupsService, $scope, $log, $uibModal) {
    $scope.groupSelected = [];
    $scope.location = '';
    $scope.groupguid = '';
    $scope.newGroupName = '';
    $scope.devicesNotinGroup = [];
    $scope.newGroupAddMember = 'false';
    $scope.isCollapsed = false;
    $scope.groupSelected.GroupID = 0;
    $scope.SelectedDevices = [];
    $scope.deviceIDs = [];
    $scope.dropdownSetting = {
        scrollableHeight: '200px',
        scrollable: true,
        enableSearch: true
    }

    // Populate Jobs
    GroupsService.GetDeviceList().then(function (d) {
        $scope.GroupList = d.data;
        console.log(d.data)
    }, function (error) {
        alert('Error!');
    });

    $scope.showChilds = function (item) {
        $scope.grouplist = [];

        item.active = !item.active;
        console.log("here item=" + item.GroupName + " active=" + item.GroupName.active);
        grouplist = item.SubGroup;

    };
    $scope.showInfoForGroup = function (item) {
        console.log("item = " + item + "Count = " + item.DeviceCount);
        GroupsService.GetGroupDeviceInformation(item).then(function (d) {
            $scope.groupSelected = d.data.devicegroupitem;
            //$scope.devicesNotinGroup = d.data.devicesnotingroup;
            angular.forEach(d.data.devicesnotingroup, function (value, index) {

            $scope.devicesNotinGroup.push({ label: value.HostName, id: value.HostName  });

            });
            //console.log($scope.devicesNotinGroup)
        })

    }, function (error) {
        console.log("item = " +item + "Count = " + groupSelected.DeviceCount);
    };
    $scope.DeleteDeviceFromGroup = function (deviceguid, groupguid ) {
        console.log("DeviceGuid = " + deviceguid + " GroupGuid = " + groupguid);
        GroupsService.DeleteDeviceFromList(deviceguid, groupguid).then(function (d) {
            $scope.groupSelected = d.data;
        })
    }
    $scope.AddDeviceToGroup = function (hostname, groupguid) {
        GroupsService.AddDeviceToGroup(hostname, groupguid).then(function (d) {
            $scope.showInfoForGroup(dt.guid);
            //$scope.groupSelected = d.data.devicegroupitem;
            //$scope.devicesNotinGroup = d.data.devicesnotingroup;
            $scope.newGroupAddMember = 'false';
        })
    }
    $scope.SubmitMultipleDevices = function (groupguid){
        $scope.deviceIDs = [];
        console.log($scope.SelectedDevices);
        angular.forEach($scope.SelectedDevices = function (value) {
            $scope.deviceIDs.push({ dname: value.HostName, dguid: groupguid } );
        });


        console.log('device ids ');
        console.log($scope.deviceIDs);
        var data = { deviceIDs: deviceIDs };
        console.log(data);
        angular.toJson(data);
        GroupsService.SubmitMultiDevicesToGroup(data)
                      .success(function () {

                      })
      .error(function (error) {

      });

    }


    $scope.CreateGroup = function (groupID, groupName, newGroupAddMember) {
        angular.isUndefinedOrNull = function (groupID) {
            return angular.isUndefined(groupID) || groupID === null
        }
        $scope.GroupList = '';
        console.log("check value equals" + groupID)
        GroupsService.CreateSubGroup(groupID, groupName, newGroupAddMember).then(function (d) {
            $scope.GroupList = d.data;
            $scope.newGroupName = '';
            $scope.newGroupAddMember = false;
        })
    }
    $scope.DeleteGroup = function (groupID) {
        $scope.GroupList = '';
        GroupsService.DeleteSubGroup(groupID).then(function (d){
        $scope.GroupList = d.data;
        $scope.newGroupName = '';
        })

    }
}])

MyApp.factory('GroupsService', function ($http) { // explained about factory in Part2
var fac = {};
fac.GetDeviceList = function () {
    return $http.get('/DeviceGroups/getgrouptree')
}
fac.GetGroupDeviceInformation = function (guid) {
    return $http.get('/DeviceGroups/GetGroupDeviceInfo?groupguid=' + guid)
}
fac.DeleteDeviceFromList = function (deviceguid, groupguid) {
    return $http.get('/DeviceGroups/DeleteDeviceFromGroup?deviceguid='+ deviceguid + "&amp;groupguid=" + groupguid)
}
fac.AddDeviceToGroup = function (hostname, groupguid) {
    return $http.get('/DeviceGroups/AddDeviceToGroup?hostname=' + hostname + "&amp;groupguid=" + groupguid)
}
fac.CreateSubGroup = function (groupID, groupName, newGroupAddMember) {
    return $http.get('/DeviceGroups/CreateGroup?GroupID=' + groupID + "&amp;groupName=" + groupName + "&amp;AddMember=" + newGroupAddMember)
}
fac.DeleteSubGroup = function (groupID) {
    return $http.get('/DeviceGroups/DeleteGroup?GroupID=' + groupID)
}
fac.SubmitMultiDevicesToGroup = function (data) {
    return $http.post('/DeviceGroups/AddMultipleDevicesToGroup', data)
}
return fac;
});
</code></pre>

<p>Here is the view code:</p>

<pre><code>@model List&lt;NetworkCafe.Models.DeviceGroup&gt;

@{
ViewBag.Title = "Groups";
}
&lt;style&gt;
#clickable:hover {
    cursor: pointer;
}
.body-content{padding-top:50px}
.checkbox{padding:0;margin:0;}
.dropdown-menu{overflow:auto !important;}
.form-group div{display:inline-block; margin-right:10px}
&lt;/style&gt;
&lt;link rel="stylesheet" href="../Content/font-awesome.min.css"&gt;
&lt;div class="container" style="width:90%" ng-app="MyApp" ng-controller="GroupsController"&gt;
&lt;div class="col-lg-3"&gt;
    &lt;div ng-class="dropdown" class="panel panel-warning"&gt;
        &lt;div class="panel-heading"&gt;
            Tree List of Groups
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;script type="text/ng-template" id="tree-structure"&gt;
                &lt;span&gt;
                    &lt;span id="clickable" ng-class="{'glyphicon glyphicon-chevron-up':(!dt.AddMembers) &amp;&amp; (!dt.active), 'glyphicon glyphicon-chevron-down':(!dt.AddMembers) &amp;&amp; (dt.active),  'childElement':(dt.AddMembers)}" ng-click="showChilds(dt)"&gt;&lt;/span&gt;
                    &lt;span id="clickable" ng-click="showInfoForGroup(dt.guid)"&gt; {{dt.GroupName}} &lt;/span&gt;
                &lt;/span&gt;

                &lt;ul ng-if="dt.AddMembers"&gt;
                    @*&lt;li&gt;Device Count: {{dt.DeviceCount}}&lt;/li&gt;
                        &lt;li&gt;Total Ports: {{dt.TotalPortCount}}&lt;/li&gt;
                        &lt;li&gt;Open Ports: {{dt.OpenPortCount}}&lt;/li&gt;
                        &lt;li&gt;Reserved Ports: {{dt.ReservedPortCount}}&lt;/li&gt;
                        &lt;li&gt;Percent Used: {{dt.PercentUsed}}&lt;/li&gt;*@
                    @*&lt;li&gt;&lt;button ng-click="href"&lt;/li&gt;*@
                &lt;/ul&gt;
                &lt;ul style="list-style: none" ng-show="dt.active" class="childElement"&gt;
                    &lt;li ng-repeat="dt in dt.SubGroup" ng-include="'tree-structure'"&gt;

                    &lt;/li&gt;
                &lt;/ul&gt;

            &lt;/script&gt;
        &lt;/div&gt;
        &lt;ul style="list-style: none" ng-class="list-group-item" class="parentList"&gt;
            &lt;li ng-repeat="dt in GroupList" ng-include="'tree-structure'" style="list-style: none"&gt;

            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-lg-3"&gt;
    &lt;div class="panel panel-info"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Group {{groupSelected.GroupName}} Information&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;span ng-hide="!groupSelected.AddMembers"&gt;
                This group has devices and can not have subgroups.
            &lt;/span&gt;
            &lt;table class="table table-striped table-hover" ng-hide="!groupSelected.AddMembers"&gt;
                &lt;tr&gt;
                    &lt;td&gt;Device Count: &lt;/td&gt;
                    &lt;td&gt;&lt;/td&gt;
                    &lt;td&gt;{{groupSelected.DeviceCount}}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;Total Ports: &lt;/td&gt;
                    &lt;td&gt;&lt;/td&gt;
                    &lt;td&gt;{{groupSelected.TotalPortCount}}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;Open Ports: &lt;/td&gt;
                    &lt;td&gt;&lt;/td&gt;
                    &lt;td&gt;{{groupSelected.OpenPortCount}}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;Reserved Ports: &lt;/td&gt;
                    &lt;td&gt;&lt;/td&gt;
                    &lt;td&gt;{{groupSelected.ReservedPortCount}}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;Percent Used:&lt;/td&gt;
                    &lt;td&gt;&lt;/td&gt;
                    &lt;td&gt;{{groupSelected.PercentUsed}}&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;

            &lt;span ng-hide="groupSelected.AddMembers"&gt;
                This group has subgroups and can not have members.&lt;br /&gt;&lt;br /&gt;
                &lt;label&gt;CREATE SUBGROUP&lt;/label&gt;&lt;br /&gt;
                &lt;input ng-model="newGroupName" placeholder="Group Name" /&gt;&lt;br /&gt;
                &lt;label&gt;Group Type&lt;/label&gt;&lt;br /&gt;
                &lt;input type="checkbox" ng-model="newGroupAddMember" ng-checked="!newGroupAddMember" /&gt;Group will be used for Device.&lt;br /&gt;
                &lt;button type="submit" class="btn btn-success" ng-click="CreateGroup(groupSelected.GroupID, newGroupName, newGroupAddMember)"&gt;Submit&lt;/button&gt;&lt;br /&gt;----------------------- &lt;br /&gt;
            &lt;/span&gt;
            &lt;span&gt;
                &lt;a class="btn btn-danger" ng-click="DeleteGroup(groupSelected.GroupID)"&gt;Danger Delete Group &lt;/a&gt; &lt;br /&gt;
                Delete Group. This will delete all subgroups and devices under this group.
            &lt;/span&gt;

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-lg-6" ng-hide="!groupSelected.AddMembers"&gt;
    &lt;div class="panel panel-success"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Device List&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;table class="table table-striped table-hover "&gt;
                &lt;tr&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;Device Name&lt;/th&gt;
                    &lt;th&gt;Total Ports&lt;/th&gt;
                    &lt;th&gt;Open Ports&lt;/th&gt;
                    &lt;th&gt;Reserved Ports&lt;/th&gt;
                    &lt;th&gt;Percent Used&lt;/th&gt;
                &lt;/tr&gt;
                &lt;tr ng-repeat="dl in groupSelected.DeviceList"&gt;

                    &lt;td&gt; &lt;i id="clickable" class="fa fa-times" ng-click="DeleteDeviceFromGroup(dl.guid, groupSelected.guid)"&gt;&lt;/i&gt; &amp;nbsp;&lt;/td&gt;
                    &lt;td&gt;{{dl.DeviceName}}&lt;/td&gt;
                    &lt;td&gt;{{dl.TotalPortCount}}&lt;/td&gt;
                    &lt;td&gt;{{dl.OpenPortCount}}&lt;/td&gt;
                    &lt;td&gt;{{dl.ReservedPortCount}}&lt;/td&gt;
                    &lt;td&gt;{{dl.PercentUsed}}&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;&lt;/td&gt;
                &lt;/tr&gt;

            &lt;/table&gt;
            @*&lt;ul class="nav navbar-nav"&gt;
                &lt;li class="dropdown"&gt;
                    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;----------Add Device from Switch List----------&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class="dropdown-menu" role="menu"&gt;
                        &lt;li ng-repeat="sl in devicesNotinGroup"&gt;
                            &lt;span&gt;
                                &lt;i id="clickable" class="fa fa-plus-square" ng-click="AddDeviceToGroup(sl.HostName, groupSelected.guid)"&gt;&lt;/i&gt; &amp;nbsp; {{sl.HostName}} &amp;nbsp; {{sl.Site}} &amp;nbsp; {{sl.Zone}}
                            &lt;/span&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;*@
            &lt;form class="form-inline" name="myForm" role="form" ng-submit="SubmitMultipleDevices(groupSelected.guid)"&gt;
                &lt;div class="form-group"&gt;
                    &lt;label&gt;Add Devices to Group: &lt;/label&gt;
                    @* Directive *@
                    &lt;div ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="devicesNotinGroup" selected-model="SelectedDevices" checkboxes="true"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;br /&gt;
                &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

@section scripts{
&lt;script src="~/Scripts/angular-1.4.9/ui-bootstrap-tpls-1.1.2.min.js"&gt;&lt;/script&gt;
&lt;script src="~/Scripts/AngularControllers/DeviceGroupsV2.js"&gt;&lt;/script&gt;
&lt;script src="~/Scripts/angular-1.4.9/angularjs-dropdown-multiselect.min.js"&gt;&lt;/script&gt;
&lt;script src="~/Scripts/angular-1.4.9/lodash.js"&gt;&lt;/script&gt;
}
</code></pre>