JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.4/angular.min.js"></script>
<div ng-app='shop-app' ng-controller='ConfiguratorCtrl'>
    <div class="configurator-input-wrapper">
        <h2 class="configurator-input-wrapper-title">Artikel</h2>
        <div class="configurator-input-wrapper-content">
            <ul ng-model='otherProductId' fancy-select='Produkt' title='Produkt'>
                <li ng-repeat="product in products" value="{{product.id}}" label="{{product.title}}" class="selected">{{product.name}}</li>
            </ul>
            <ul ng-model='otherProductId' fancy-select='Format' title='Format'>
                <li ng-repeat="product in products" value="{{product.id}}" label="{{product.title}}" class="selected">{{product.name}}</li>
            </ul>
        </div>
    </div>


    <div class="configurator-input-wrapper">
        <h2 class="configurator-input-wrapper-title">Flyer</h2>
        <div class="configurator-input-wrapper-content">
            <ul ng-model='productId' fancy-select='Produkt' ng-change='productChange(productId)' title='Produkt'>
                <li value="17" label="Buch" class="selected">Buch</li>
                <li value="18" label="Broschüre">Broschüre</li>
                <li value="19" label="Flyer">Flyer</li>
                <li value="20" label="Breifbogen">Briefbogen</li>
            </ul>
        </div>
    </div>
    {{productId}},{{otherProductId}}
    <button ng-click="productId = 20">change to 20</button>
</div>

CSS

.fancy-select-pull-down-button{
    background-color:grey;
    float: right;
    width:31px;
    height: 32px;
    color white;
}

.fancy-select-input-wrapper{
    height: 32px;
    border: 1px solid #C8C8C8;
}

.fancy-select-options{
    margin:0;
    padding-left: 0;
    background-color: #ffffff;
    border: 1px solid #C8C8C8;
    border-top: 0 solid #C8C8C8;
}

.fancy-select-options > li{
    list-style: none;
    cursor: pointer;
    padding: 3px;
}

.fancy-select-options > li:hover{
    background-color: #d2d2d2;
}

.fancy-select-label{
    float: left;
    padding: 5px 10px;
}

JavaScript

angular.module("shop-app", [])
    .directive("fancySelect",function(){
        // some jquery helper
        var methods = {
            closeOptions : function(optionBox){
                optionBox
                    .css({display:'none'})
                    .appendTo(".fancy-select-input-wrapper.open")
                    .parent()
                    .removeClass("open")
            },
            selectOption : function(optionBox,value){
                optionBox.children("[value="+value+"]").addClass("selected").siblings().removeClass("selected");
            }
        };

        return {
            require:'?ngModel',
            transclude : true,
            restrict: 'A',
            // if {ngModel : '='} is turned on ng-change doesn't work anymore
            // if no isolated scope -> the titles of the pulldown will all be the same
            // So this is the way to go -> Problem -> ngModel doesn't pass data to parent scope
            scope : true,
            link: function(scope, element, attr, ngModel) {
                scope.title = attr.fancySelect;

                $(element).find(".fancy-select-options").on("click","> *",[scope,ngModel],function(event){
                    var optionsWrapper = $(this).parent();
                    var value = $(this).attr('value');
                    var ngModel = event.data[1];
                    var scope = event.data[0];
                    methods.closeOptions(optionsWrapper);
                    methods.selectOption(optionsWrapper,value);
                    //simulate to scope: {ngModel : '='}
                    ngModel.$setViewValue(value);
                    scope.$apply(attr.ngModel,value);
                });

                // get from ngModel, not working yet but this is only the next issue to fix
                ngModel.$viewChangeListeners.push(function(value) {
                    methods.selectOption($(element).find(".fancy-select-options"),value);
                });

              ...