[SOLVED] Angular UI-Select tagging Simple String Tags (With Custom Tag Label & Sort Enabled)

Angular UI-Select tagging Simple String Tags (With Custom Tag Label & Sort Enabled)

I am building a recipe website which uses angular ui-select when adding tags which will be added to the db if it's not already on db.

I downloaded AngularJS and Angular UI-Select and added it in my BundleConfig.cs and added the demo.js code here in my Site.js

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.min.js"));

bundles.Add(new ScriptBundle("~/bundles/select").Include(
"~/Scripts/select.min.js"));

bundles.Add(new ScriptBundle("~/bundles/site").Include(
"~/Scripts/Site.js"));

then I added this in my html

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="ctrl.multipleDemo.colors" theme="bootstrap" sortable="true" ng-disabled="ctrl.disabled" style="width: 300px;" title="Choose a color">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search">
    {{color}}
</ui-select-choices>
</ui-select>
<p>Selected: {{ctrl.multipleDemo.colors}}</p>

then below in my script section

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/select")
@Scripts.Render("~/bundles/site")
}

but when I run it the output I get is this Output of demo

{{$item}} {{color}}
Selected: {{ctrl.multipleDemo.colors}}

I also tried adding all the css and js links but it didn't work.

I don't know what I'm missing, can anybody help me out?

Solution

I tried putting the ng-app and ng-controller in _Layout.cshtml instead of the div that was enclosing the ui-select in my html

<html ng-app="app">
<head>
</head>
<body ng-controller="mainCtrl">

then I added $http to the js code

var app = angular.module('app', [])
    app.controller('mainCtrl', function ($scope, $window, $http) {