md contact chips css not working - angularjs-material

Question

I am using md contact chips and my template looks like this
<md-chips ng-model="ser" md-autocomplete-snap
md-require-match="true">
<md-autocomplete
ng-disabled="autoCompleteOptions.isDisabled"
md-no-cache="autoCompleteOptions.noCache"
md-selected-item="si"
md-search-text="searchText"
md-items="sellable in getSellableByFilter(searchText)"
md-min-length="1"
md-item-text="sellable.name"
placeholder="Search for a Service/Package here"
md-select-on-match="true",
>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
Searching works fine but when I select an item, it looks like input field only and there is no chip like css attached.
How do I fix this?
I tried using md contact chips as well but still same issue.
error message I see in console
angular.js:14800 TypeError: Cannot read property 'some' of undefined
at MdChipsCtrl.appendChip (angular-material.js:27822)
at MdChipsCtrl.<anonymous> (angular-material.js:28128)
at angular.js:1383
at angular-material.js:25732
at Array.forEach (<anonymous>)
at handleSelectedItemChange (angular-material.js:25732)
at angular-material.js:25694
at processQueue (angular.js:17169)
at angular.js:17217
at Scope.$digest (angular.js:18352) "Possibly unhandled rejection: {}"
(anonymous) # angular.js:14800
(anonymous) # angular.js:11218
processChecks # angular.js:17199
$digest # angular.js:18352
(anonymous) # angular.js:18581
completeOutstandingRequest # angular.js:6428
(anonymous) # angular.js:6707
setTimeout (async)
Browser.self.defer # angular.js:6705
$evalAsync # angular.js:18579
(anonymous) # angular.js:17041
scheduleProcessQueue # angular.js:17217
then # angular.js:17138
getDisplayValue # angular-material.js:25907
(anonymous) # angular-material.js:26070
(anonymous) # angular-material.js:1730
processQueue # angular-material.js:1727
(anonymous) # angular.js:20566
completeOutstandingRequest # angular.js:6428
(anonymous) # angular.js:6707
setTimeout (async)
Browser.self.defer # angular.js:6705
timeout # angular.js:20564
nextTick # angular-material.js:1711
positionDropdown # angular-material.js:25453
handleResults # angular-material.js:26273
handleQuery # angular-material.js:26251
focus # angular-material.js:25824
fn # VM61232:4
callback # angular.js:27475
$digest # angular.js:18352
$apply # angular.js:18649
(anonymous) # angular.js:27480
dispatch # jquery.js:5206
elemData.handle # jquery.js:5014

Answer 1

Your model has to be of type Array, and perhaps in your controller you're not initializing it to anything (it's undefined).
ser = []