Placeholder is not working in angularjs select2

Question

Here is the code which i was tried. i tried to add placeholder with angularjs code and html code but it is not working in both the case. please help me or suggest me how to do in this case

 <select ui-select2="select2Options" 
style="width:100%" 
ng-model="SelectedProcessandIngredients"
 data-placeholder="Select or Add Process/Ingredient" 
ng-options="c.name group by c.status for c in colors"
 ng-change="selectedinnerLoop()" >          
        </select>

Angular js Code:

$scope.select2Options = {
        placeholder : "Select or Add Process/Ingredient",
        formatResult : processList,
        formatSelection : processList,
        escapeMarkup : function (m) {
        return m;
        }

    };

Answer 1

Add an empty option tag inside your select tag and the placeholder will be shown. Also, use ng-repeat instead of ng-options. Select2 is incompatible with ng-options.

<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
    <!-- empty option gets placeholder working -->
    <option value=""></option>
    <!-- ng-repeat to populate dynamic options -->
    <option ng-repeat="number in range" value="{{number.value}}">{{number.text}}</option>
</select>