I have a jQuery UI select list that I'm using in a very basic AngularJS app. When the list is opened and an item is selected, this change doesn't make it through to Angular, so the app doesn't respond to the change. If I remove the jQuery UI aspect of it and make it a regular select list, it's fine. I figure there must be a way to make them play nicely, does anyone know how to do this?

**Example:** 

HTML:

```
<div data-ng-app="appExample">
    <h1>Example 1</h1>
    <p>No jQuery UI</p>
    <div data-ng-controller="appCtrl1">
        <select id="exampleList1" data-ng-model="selectedOption">
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
        <span class="result">You selected Option {{ selectedOption }}</span>
    </div>
    <h1>Example 2</h1>
    <p>jQuery UI</p>
    <div data-ng-controller="appCtrl2">
        <select id="exampleList2" data-ng-model="selectedOption">
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
        <span class="result">You selected Option {{ selectedOption }}</span>
    </div>
</div>

```

JavaScript:

```
appExample = angular.module('appExample', []);

appExample.controller('appCtrl1', function ($scope) {
    $scope.selectedOption = 0;
});

appExample.controller('appCtrl2', function ($scope) {
    $scope.selectedOption = 0;
});

$(function () {
    $("#exampleList2").selectmenu();
});

```

JSFiddle:

<http://jsfiddle.net/wtp1esyg/2/>