title: Binding web devexpress dxDataGrid and angular $scope
body: <p>I am having issues with binding $scope in angular and dxDataGrid. </p>
  
  <p>I'm using devexpress libarary dx.all.js which provides the dxDataGrid with all its goodies.  I have a div dx-data-grid and trying to pass the selected row data onto the $scope. </p>
  
  <p>Chrome debuger says that it is null both my $scope.ticketSelected variable and the selectedRowsData object. here is the API
  <a href="http://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Events/?version=14_2#selectionChanged" rel="nofollow">http://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Events/?version=14_2#selectionChanged</a></p>
  
  <p>HTML CODE is </p>
  
  <p>Angular Code is </p>
  
  <pre><code>    controller('homeController', function($scope, $routeParams) {
          $scope.id = $routeParams.id;
          $scope.ticketSelected = [];     
          $scope.items = [];
  $scope.random = function() {
              var s = 55;
              s = Math.sin(s) * 10000;
              s = s - Math.floor(s);
              return s;
          };
  
      $scope.generateData = function (count) {
          $scope.items = [];
          var i,item;
          var names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty'];
          var company = ['MGPI', 'L &amp; T'];
          var floor = ['GF', 'FF'];
          var bldg = ['S', 'P'];
          var startBirthDate = Date.parse('1/1/1975');
          var endBirthDate = Date.parse('1/1/1992');
  
          for (i = 0; i &lt; count; i++) {
              $scope.random();
              var insertDate = new Date(startBirthDate + Math.floor($scope.random() * 
                      (endBirthDate - startBirthDate)));
              //insertDate.setHours(12);
  
              $scope.random();
              var nameIndex = 
                  Math.floor($scope.random() * names.length);
              item = {
                  wkonum: i + 1,
                  requester: names[nameIndex],
                  company: company[Math.floor(nameIndex / 5)],
                  floor: company[Math.floor(nameIndex / 5)],
                  bldg: company[Math.floor(nameIndex / 5)],
                  insertDate: insertDate
              };
              $scope.items.push(item);
          }
      };
  
      $scope.generateData(5000);
  
      $scope.gridOptions = {
              bindingOptions: {
                  dataSource: 'items'//generateData(1000)
              },
              hoverStateEnabled: true,
              paging: {
                  enabled: true,
                  pageSize:10
              },
              /*editing: {
                  editMode: 'row',
                  editEnabled: true,
                  removeEnabled: true,
                  insertEnabled: true,
                  removeConfirmMessage: 'Are you sure you want to delete this record?'
              },*/
              selection: {
                  mode: 'single'
              },
              customizeColumns: function (columns) {
                  columns[0].width = 80;
                  columns[1].width = 100;
              },
              onSelectionChange:function(selecteditems){
                  $scope.ticketSelected = selecteditems.selectedRowsData;             
  
              },
              columns: [
                      'wkonum',
                      'requester',
                      'company',
                      'floor',
                      'bldg',
                      'insertDate'
              ]     
          };  
  </code></pre>
  
  <p>}).</p>