AngularJs UI-Select change to input-lg

I had the same problem. I solved it with css.

.ui-select-bootstrap>.ui-select-match>.btn,
.form-control:focus {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

The uiSelect directive has replace:true in it's config. Anything you add to that element will be removed. The docs and code have no way of adding custom classes from a quick scan over.

However the implementation does have a concept of themes. This is defined as an attribute on the directives element. There are a number of themes built in.

• bootstrap
• select2
• selectize

For example to use these themes you would use:

// Bootstrap
<ui-select ng-model="link.closer.data" theme="bootstrap">

// Select 2
<ui-select ng-model="link.closer.data" theme="select2">

// Selectize
<ui-select ng-model="link.closer.data" theme="selectize">

If you look at the code that loads in the templates, you'll see the following in the templateUrl property.

templateUrl: function(tElement, tAttrs) {
    var theme = tAttrs.theme || uiSelectConfig.theme;
    return theme + (angular.isDefined(tAttrs.multiple) ? 
        '/select-multiple.tpl.html' : 
        '/select.tpl.html');
}

So angular will load the correct theme based on the directive attribute or use the default value from the configuration.

As a workaround, you could create your own theme by building the templates for them.

// Note the location for my theme is "mytheme/select.tpl.html"
// making my theme name: "mytheme"
angular.module("customSelect")
    .run(["$templateCache", function($templateCache {
        $templateCache.put("mytheme/select.tpl.html",
            "<p>my custom html here<\/p>";
    ]});

An easy way to do this is to open up the ui-select/dist/select.js scroll to the bottom. Copy all the templateCache declarations for bootstrap. Paste them into your own project and modify the theme name and the html, including your class input-lg.

Now include your theme name as the theme in the directive.

<ui-select ng-model="link.closer.data" theme="mytheme">

And to use the native

<ui-select ng-model="link.closer.data">

Or

<ui-select ng-model="link.closer.data" theme="bootstrap">

Now you have full control over the HTML generated by the directive including all classnames etc without modifying the core code.