JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-controller="Ctrl">
  <button ng-click="open()">Open</button> (twice in Chrome or once in Edge/Firefox) to reproduce the bug.
</div>

JavaScript

var m = angular.module('app', ['ngAnimate', 'ui.bootstrap']);

m.directive('textField', function() {
	return {
  	template: '<input type="text" ng-model="value" autofocus>',
    link: function(scope, iElement,$timeout) {
    	iElement.find('input').on('focus', function() {
      	//scope.$apply(function() {
        $timeout(function(){
        	scope.value = 'focus';
        });
      });
    }
  };
});

m.controller('Ctrl', function($scope, $uibModal, $timeout) {
  $scope.open = function() {
    $uibModal.open({
      template: '<text-field></text-field>'
    });
  };
});

angular.bootstrap(document, [m.name]);