Demo > Horizontal Layout

This will create inline selection items, which will span over the parent element's width.
You might need to make some CSS adjustments depending on the CSS UI kit that you use.


 

Define your directive:

<div
    isteven-multi-select
    input-model="modernBrowsers"
    output-model="outputBrowsers"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
    ...
    orientation="horizontal" 
>
</div>

Define your input-model:

$scope.modernBrowsers = [
  { icon: "{{removeHost(row.icon)}}", name: "{{row.name}}", maker: "{{row.maker}}", ticked: {{row.ticked}} },
];
Output model

Look at the output-model below to see the values getting updated as you select / deselect an item in the directive. Icons in the objects are actually full HTML img tag, shortened for simplicity.

$scope.outputBrowsers = [
  { icon: "{removeHost(row.icon)}}", name: "{{row.name}}", maker: "{{row.maker}}", ticked: {{row.ticked}} },
];