AngularJS ngModel doesn't work inside a ui-bootstrap tabset

Question

The following code illustrates the problem:

Answer 1

Almost certainly the issue is that you are trying to bind to a primitive (in this case a float). Something like this should fix it.

$scope.data = {}
$scope.updateValueInScope = function () {
  $scope.data.valueInScope = $scope.data.value;
  $scope.changes++;
}

Basically in angular, if you bind to a primitive the value of the variable is passed around, and not the reference to it, which can break 2-way binding. I'm guessing that the tabset directive creates its own scope, so the valueInScope variable defined in the controller loses its binding in the child scope of the tabset because its a primitive. Anyway, don't bind to primitives and it should work.

Here is a fixed version of plunk