Demo > Dynamic Update

The directive listens to changes on their input $scope variable. This is how you programatically update the directive - by changing the input model - and it will refresh accordingly.

Update input-model

Click one of the buttons below to load different data into it.

Load modern browsers Load old browsers

Update singular data

You can also update a single item. Operations like these are totally valid:

• $scope.modernBrowsers[ 1 ].ticked = false, or
• $scope.modernBrowsers[ 1 ].name = 'Hola!'

Update singular data

<div
    isteven-multi-select
    input-model="dynamicData"
    output-model="outputBrowsers"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
>
</div>
...
<!-- The buttons to do data operation -->
<button type="button" class="btn btn-success btn-xs" ng-click="switchSource( 'modernBrowsers' )" >Load modern browsers</button>
<button type="button" class="btn btn-primary btn-xs" ng-click="switchSource( 'oldBrowsers' )" >Load old browsers</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="dynamicData[ 0 ].name = 'Hello World!'" >Update singular data</button>

// This will be our input model
$scope.dynamicData = [];

// Just a function to switch the model on button click.
$scope.switchSource = function( data ) {
    $scope.dynamicData = angular.copy( $scope[ data ] );    
}

// Initially we'll use the modern browsers
$scope.switchSource( 'modernBrowsers' );

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.

Learn more