JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="">
    <div ng-controller="NewCtrl1">
        <strong>Doesn't Work</strong>
        <pre>{{tags}}</pre>
        <input type="text" name="tags" id="tags" placeholder="Tag, Tag" ng-model='tags' ng-list />
        <p><small>Suggested Tags:</small></p>
        <ul>
            <li ng-repeat="tag in suggestedTags" ng-click="addSuggestedTag(tag)">{{tag}}</li>
        </ul>
    </div>
    <hr />
    <div ng-controller="NewCtrl2">
        <strong>Does Work</strong>
        <pre>{{tags}}</pre>
        <input type="text" name="tags" id="tags" placeholder="Tag, Tag" ng-model='tags' ng-list />
        <p><small>Suggested Tags:</small></p>
        <ul>
            <li ng-repeat="tag in suggestedTags" ng-click="addSuggestedTag(tag)">{{tag}}</li>
        </ul>
    </div>
</div>

CSS

ul { list-style: none; margin: 0; padding: 0; }
li { cursor: pointer; display: inline-block; margin-right: 1em; text-decoration: underline; color: blue;}
p { margin: 0.5em 0; }

JavaScript

function NewCtrl1($scope) {
    $scope.tags = [];
    $scope.suggestedTags = ['foo', 'bar', 'baz'];
    
    $scope.addSuggestedTag = function(tag) {
        // doesn't work
        $scope.tags.push(tag);

        // remove from suggestedTags array
        var index = $scope.suggestedTags.indexOf(tag);
        $scope.suggestedTags.splice(index, 1);
    };
}

function NewCtrl2($scope) {
    $scope.tags = [];
    $scope.suggestedTags = ['foo', 'bar', 'baz'];
    
    $scope.addSuggestedTag = function(tag) {        
        // does work
        var tags = angular.copy($scope.tags);
        tags.push(tag);
        $scope.tags = tags;

        // remove from suggestedTags array
        var index = $scope.suggestedTags.indexOf(tag);
        $scope.suggestedTags.splice(index, 1);
    };
}