Hi, 

I am using iggrid with Angularjs whcih is working fine. But I am facing issue while trying  to call a formatter function on a column. I get the following error

"angular.js:13236 TypeError: col.formatter is not a function"

Please review the code below. Also there are not many samples for iggrid with html which is implementation that Im using.It would be helpful if you can provide me samples for iggrid with Angularjs

<div id="dvgrid2" style="display:none;" class="col-md-6" ng-show="edit">
<h3>Transaction Plugs</h3>
<ig-grid id="grid2"
data-source="TransactionGroupingPlugs"
data-source-type="json"
primary-key="id"
auto-commit="true"
auto-generate-columns="false">
<columns>
<column key="id" header-text="ID" hidden="true"></column>
<column key="fundid" header-text="Fund ID" data-type="number"></column>
<column key="grpg_to_compare" header-text="Grouping To Compare" data-type="string"></column>
<column key="grpg_to_update" header-text="Grouping To Update" data-type="string"></column>
<column key="target_transactiongrpgpurpose" header-text="Target Grouping Purpose" formatter="lookupUserGroupingPurposes"></column>
<column key="source_transactiongrpgpurpose" header-text="Source Grouping Purpose" data-type="string"></column>
</columns>
<features>
<feature name="Updating" edit-mode="rowedittemplate" event-edit-row-ended="save" event-row-deleted="save">
<column-settings>
<column-setting column-key="fundid">
</column-setting>
<column-setting column-key="grpg_to_compare" required="true">
</column-setting>
<column-setting column-key="grpg_to_update" required="true">
</column-setting>
<column-setting column-key="target_transactiongrpgpurpose" required="true">
</column-setting>
<column-setting column-key="source_transactiongrpgpurpose" required="true">
</column-setting>
</column-settings>
</feature>
<feature name="Paging" page-size="10">
</feature>
<feature name="Sorting">
</feature>
</features>
<rest-settings>
<create url=@Url.Content(@TNRAPI + "V1/PEVision/FundManagers/0/TransactionGroupingPlugs")>
</create>
</rest-settings>
</ig-grid>
</div>

<script type="text/javascript">

var module = angular.module('adminApp', ['igniteui-directives', 'ngFileUpload']);
module.controller('adminCtrl', function ($scope, $http, Upload, $timeout, $filter) {
// Initial
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.MenuItemOverrides = [{ "menuitemoverrideid": 1, "id": 1, "name": "test", "desc": "test", "fontclass": "test", "ordinal": 1, "hidden": false }];
$scope.TransactionGroupingPlugs = [{ "id": 1, "fundid": 1 }];
$scope.CurrentFundManager = {
id: null,
name: 'Create New FundManager',
logo: null,
cssfile: null,
ordinal: null,
hasLogochanged: false,
hasCsschanged: false
};
$scope.AvailableFundManagers = [
{ id: '1', name: 'Option A' },
{ id: '2', name: 'Option B' },
{ id: '3', name: 'Option C' }
];
$scope.SelectedFundManagerIndex = 0;
$scope.log = '';
$scope.CurrentFundManagerLogoSrc = '@Url.Content("/ClientResources/0/0_logo.png")';
$("#dvEditFundManager").css("display", "block");
$("#saveChange").css("display", "block");
$("#dvgrid1").css("display", "block");
$("#dvgrid2").css("display", "block");

$scope.save = function () {

$("#grid2").igGrid("saveChanges");
}

$scope.lookupUserGroupingPurposes = function (target_transactiongrpgpurpose) {
return userTypesLookup[typeid].UserTypeName;
}

</script>

Thanks,

Ashwini