Now that we can successfully render the results of a defined dimension, the next step is to implement the feedback event: the ability for the user to make a selection.

This is achieved relatively quickly using AngularJS; all you need to do is the following:

1. Capture the selected value in the drop-down list
2. Set up a watcher, which is monitoring the value for changes
3. If the value changes, apply the new selection

Beginning with step 1, the selected value can be captured using AngularJS's ng-model, placed in the select tag of the HTML:

<select ng-model="selectedValue" class="lui-select lui-select--gradient">
     <option ng-repeat='value in dimension_values track by $index' value="{{value.element_id}}" class="state_{{value.selection_state}}">{{value.title}}</option>
</select> 

If the options change, their underlying value (in this case, the element_id) will be assigned to scope.selectedValue, which can be read in the controller.

Step 2, in the controller, sets up the AngularJS watcher to watch the selectedValue for changes:

scope.$watch('selectedValue', function() {
     //I am watching selectedValue for changes
}); 

Now that it's set up, apply selections to the data model if the selectedValue has been updated:

scope.$watch('selectedValue', function() {
    if(typeof scope.selectedValue !== "undefined"){
       app.field(scope.layout.field)
        .select([parseInt(scope.selectedValue,10)])
    }
}); 

Using the Field API, selections are passed to the defined field using the qElemNumber of the dimension value.