Как отобразить вложенные объекты в HTML, используя угловые JS

Question

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

[
    {

      "ID": 114,
      "Title": "AutoZon-Mobile First Implement",
       "AccountName": "AutoZone, Inc",
       "SBU":"RCG-NA",
       "Region": {
         "lookupId": "3",
         "lookupValue": "RCG-CENTRAL"
     },
       "CurrentStatus":"Red",
       "LastStatus":"Red",
       "ProgramManager":
       [
         {
             "userId": "936",
             "userName": "Sathyavakeeswaran, Balakrishnan (Wipro)"
         },
         {
             "userId": "387",
             "userName": "Venkatachari, Srikanth (Infosys)"
         }
      ],
       "EP":"Kumar,Pankh",
       "DP":"Kumar,Pankh"

    },
{

      "ID": 114,
      "Title": "AutoZon-Mobile First Implement",
       "AccountName": "AutoZone, Inc",
       "SBU":"RCG-NA",
       "Region": {
         "lookupId": "3",
         "lookupValue": "RCG-CENTRAL"
     },
       "CurrentStatus":"Red",
       "LastStatus":"Red",
       "ProgramManager":
       [
         {
             "userId": "936",
             "userName": "Sathyavakeeswaran, Balakrishnan (Cognizant)"
         },
         {
             "userId": "387",
             "userName": "Venkatachari, Srikanth (IBM)"
         }
      ],
       "EP":"Kumar,Pankh",
       "DP":"Kumar,Pankh"

    }
]

Мне нужно отобразить счетчик менеджера в кнопке, и при наведении курсора должны отображаться только имена пользователей для всех перечисленных имен в этом

<span>
    <!--ng-if="showPM"-->
    <button class="pmBtn" ng-repeat="p in x.ProgramManager" uib-tooltip="{{p.userName}}">{{x.ProgramManager.length-1}}+</button>
</span>

ожидается, что будет отображаться кнопка со значением счетчика и при наведении указывать имена пользователей для каждого списка в объекте json