ngHandsontable | Official AngularJS directive | Grid library

I believe you need to order your

Also try using arrow functions where you can instead of function()... Or set up:

This should be the fix

var mainApp = angular.module('adminApp', ['ngHandsontable','ui.select']);

Remove your overrflow:hidden in

One possible way to fix this problem is to use $timeout service which implements so called . See here updated JSBin. Also, to see explanation of how $timeout works read the answer Here. Hope this will help.

You must set the settings for the columns to be numeric. Here is a working snapshot of your jsbin

Apparently setting the type and invalidCellClassName setting in the main setting object applies for the entire table allowing you to add or remove columns unlike the column level setting that I suggested prior to this edit which disabled adding or removing columns. Updated snapshot of your jsbin with setting for entire table is here

So the problem is that you are iterating over an array (ng-repeat) and changeing the items of the array. The items are removed from the DOM and new one are inserted because they are strings and thereby compared by value. This makes you loose focus. It's pretty simple to fix though. Just track by index as the objects are in identical order.

Change: