Design pattern for AngulasJS controller with 'parameter' from HTML

I am new to AngularJS, and I am used to program in C/C++, so I feel a little lost in the new AngulaJS world.

I have the var DefMenuItem holding information to display a table with menu items.

var DefMenuItem =
{
  "menuItemsNumF32": [
    {
      "kind": "Num",
      "obj": "eDefRegKinDriverMidObjItemIdHumWaterHardness",
      "msg": "eDefGuiMsgIdNumWaterHardness",
      "opt": null,
      "hide": null
    },
    {
      "kind": "Num",
      "obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmOffset",
      "msg": "eDefGuiMsgIdNumKeepWarmOffset",
      "opt": null,
      "hide": null
    },
    {
      "kind": "Num",
      "obj": "eDefRegKinDriverMidObjItemIdHumFlickerCorrection",
      "msg": "eDefGuiMsgIdNumFlickerCorrection",
      "opt": null,
      "hide": null
    }
  ],
  "menuItemsNumU32": [
    {
      "kind": "Num",
      "obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmTimeStart",
      "msg": "eDefGuiMsgIdNumKeepWarmTimeStart",
      "opt": null,
      "hide": null
    },
    {
      "kind": "Num",
      "obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmTimeEnd",
      "msg": "eDefGuiMsgIdNumKeepWarmTimeEnd",
      "opt": null,
      "hide": null
    },
  {
    "kind": "Num",
    "obj": "eDefRegKinDriverMidObjItemIdBathDuration",
    "msg": "eDefGuiMsgIdNumBathDuration",
    "opt": null,
    "hide": null
  }
]
}

And two AngularJS controllers to link one of the lists to a with the table

kinAngularApp.controller('kinServiceNumF32Controller', [function () {
    var self = this;
    var menuItemProperty = "menuItemsNumF32";
    self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);

    self.refresh = function () {
        self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);
        refreshServicePage();
    }
    self.save = function () {
        saveObjectItemListValues(DefMenuItem[menuItemProperty], self.objectItemList);
    }
}]);

kinAngularApp.controller('kinOverviewNumU32Controller',[ function() {
    var self = this;

    var menuItemProperty = "menuItemsNumU32";
    self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);

    self.refresh = function() {
        self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);
        refreshOverviewPage();
    }
    self.save = function() {
        saveObjectItemListValues(DefMenuItem[menuItemProperty], self.objectItemList);
    }
}]);

The only difference of the controllers is the menu item list they use by intialising menuItemProperty.

What is the correct design pattern to select the menu item list on the HTML side and use multiple instances of only one controller?

Is it the correct pattern to use only one controller with service, factory or whatever?

Here ist the HTML side

<div id="menuItemMainService"
     ng-controller="kinServiceNumF32Controller as kinServiceCtrl"
     class="w3-panel rte-menuPage" style="display: none">
    <table id="idTableObjectItem" class="w3-table">
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Unit</th>
            <th>Object Id</th>
        </tr>
        <tr ng-repeat="objectItem in kinServiceCtrl.objectItemList" >
            <td></td>
            <td><input ng-model="objectItem.value" class="w3-input w3-right-align" type="text"></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <button id="buttonRefreshService" class="w3-btn" ng-click="kinServiceCtrl.refresh()">Refresh</button>
    <button id="buttonSaveService" class="w3-btn" ng-click="kinServiceCtrl.save()">Save</button>
</div>