jquery value into AngularJS

Question

<script>
        var app = angular.module('myApp', []);
        app.controller('DemoCtrl',["$scope", function($scope) {
            var custom=$("#<portlet:namespace/>customInterview").val();
            var prepare=$("#<portlet:namespace/>prepareInterview").val();
            alert(custom);
            alert(prepare);
            console.log(custom);
            console.log(prepare);
        $scope.dropdown = [
        {
            name:'Custom Interview',
            items: [
                    custom
                   ] 
        },
        {
            name:'Prepare Interview',
            items: [
                    prepare
                   ] 
        }
        ]

    }]);
    </script>
<div ng-app= "myApp" ng-controller="DemoCtrl">
        <select>
          <optgroup data-ng-repeat="header in dropdown" label="{{ header.name }}">
              <option data-ng-repeat="item in header.items" value="{{item.value}}">{{item.name}}</option>
          </optgroup>
        </select>
    </div>

I want to pass jquery value into angularjs,please let me know how to do it by i am using above function,but not working.

I am getting all object when I use alert,but not displaying in items,I am using this in drop down.

I need 1 dropdown box containing two titles in it & in that title it should show select options. Ex: Name(Title in dropbox) Santosh funky Position(Job 2nd title in dropbox) java Developer UI Developer I need like this,please help me.

Answer 1

I solved the problem, the mistake what I done is,

var custom=$("#<portlet:namespace/>customInterview").val();

var prepare=$("#<portlet:namespace/>prepareInterview").val();

instead of assigning the values i must have have to convert in json & I want to assign to variable,like this

    var custom=JSON.parse($("#<portlet:namespace/>customInterview").val());

    var panna=JSON.parse($("#<portlet:namespace/>pannaInterview").val());