Добавить переключатель к значку в AngularJS

Есть значок (в данном случае каретка), который запускает вызов функции при нажатии. Он должен запускать функцию, только если values.numerOfValues > 0

<td>   
 <span >{{values.numerOfValues}} 
        <i class = "fas fa-caret-down" ng-click = "values.numerOfValues > 0 && $ctrl.myFunction(values.ids)">
        </i>
    </span>
</td>

Вышеупомянутая часть работает хорошо.

Проблема возникает, когда я хочу добавить переключаемое меню. Я не хочу, чтобы функция вызывалась при щелчке по значку, вместо этого я хочу, чтобы при щелчке по ней открывался переключатель с опцией и только при щелчке опции для выполнения вызова.

Мне удалось сделать эту функциональность вот такой:

<div class = "yp-split-button" uib-dropdown>
    <button type = "button" class = "yp-action-btn" uib-dropdown-toggle>
    </button>
    <ul class = "dropdown-menu" uib-dropdown-menu role = "menu">
        <li role = "menuitem" ng-click = "$ctrl.myFunction(values.ids)"><a>Disable All</a></li>
    </ul>
</div>

Переключатель открывается при нажатии кнопки внутри красного круга. Моя цель - перенести эту функцию на кнопку внутри зеленого кружка.

Это функциональность, о которой я говорил в начале. Он вызывает функцию напрямую, не открывая переключатель.

Как перенести функциональность кнопки на каретку?