Wijmo 5 - AngularJS directives

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.32/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.32/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app" ng-controller="appCtrl">

        <h1>FlexGrid with drop-downs</h1>

     
        <wj-flex-grid items-source="data" selection-mode="Row"   beginning-edit="beginningEdit(s,e)" cell-edit-ended="cellEditEnded(s,e)" >
        <wj-flex-grid-column 
            header="Country"
            binding="country">
        </wj-flex-grid-column>
        <wj-flex-grid-column
            header="Action"
            binding="actionId"
            data-map="actionsMap">
        </wj-flex-grid-column>
    </wj-flex-grid>
    </div>

JavaScript

// define app, include Wijmo 5 directives
        var app = angular.module('app', ['wj']);

        // controller
        app.controller('appCtrl', function ($scope) {

            // create some random data
            var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                actions = [{ id: 1, name: 'Invite' },
                           { id: 2, name: 'Finalize' },
                           { id: 3, name: 'Withdraw' }],
                data = [], cols = [];
            for (var i = 0; i < countries.length; i++) {
                data.push({
                    country: countries[i % countries.length],
                    actionId: actions[i % actions.length].id
                });
            }

            // expose data as a CollectionView to get events
            $scope.data = new wijmo.collections.CollectionView(data);
            $scope.actionsMap = new wijmo.grid.DataMap(actions, "id", "name");

            var initialVal;
            // change city's data map depending on row
            $scope.beginningEdit = function (s, e) {
                var col = s.columns[e.col];
                if (col.binding == 'actionId') {
                    initialVal = s.getCellData(e.row, e.col, true);
                   
                }
            
            }
            $scope.cellEditEnded = function (s, e) {
                var finalVal = s.getCellData(e.row, e.col, true);
                if (initialVal != finalVal)
                    alert("Value Changed in Dropdown");
            }

          
        });