JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp"> 
    <div ng-controller="TestCtrl">
        <ul class="test-directive">
            <li contenteditable="true" ng-repeat="item in list">{{ item }}</li>
        </ul>
        <button ng-click="add()">Add me</button>
    </div>
</div>

JavaScript

angular.module('myApp',[])
.controller("TestCtrl", function($scope) {
    var count = 1;
     $scope.list = [
         "one", "two"
     ];

     $scope.add = function() {
         $scope.list.push("item " + count);
         $scope.$broadcast("newItemAdded");
         count++;
     };
})
.directive("testDirective", function($timeout) {
    return {
        restrict: "ACE",
        link: function(scope, element, attr) {
            scope.$on("newItemAdded", function() {
                $timeout(function() {
                    var elements = element.find("li");
                    elements[elements.length - 1].focus(); 
                });             
               });
         }
    };
});