I am currently using AngularJS. And so I wish to have AngularJS attributes on my people picker <input>s.

A first example: Data binding; shows how simple it is to use <input>s with no hassle in getting or setting input data.

<div ng-app ng-init="qty=1;cost=2">
        Quantity: <input type="number" min="0" ng-model="qty">
        Costs: <input type="number" min="0" ng-model="cost">
        <b>Total:</b> {{qty * cost | currency}}

However I do not know how I can use AngularJS with SharePoint's people picker, SPClientPeoplePicker_InitStandaloneControlWrapper. This is as it overwrote an <input> that I gave in the <div>. And as far as I know InitStandaloneControlWrapper is the only way to make a people picker.

Below is an example of what I hoped would work, but did not.

<div id="peoplePickerDiv">
    <input ng-model="myAngularInput" >

So if I haven't made the problem clear enough.
Is there a way to force SPClientPeoplePicker to use a given <input>. The <input> also has to retain the attributes given to it.


I have created a people picker by customizing ngTagsInput.


<tags-input ng-model="vm.newTask.assignedUsers"
                    placeholder="Pick User"
            <auto-complete source="vm.getPeoplePickerSuggestion($query)"></auto-complete>


vm.newTask = {
    assignedUsers: []
vm.getPeoplePickerSuggestion = function(searchString) {
    return demoAppSvc.getPeoplePickerSuggestion(searchString)
        .then(function(response) {
            var results = response.d.results;
            return results.filter(function(user) {
                return user.Name.toLowerCase().indexOf(searchString.toLowerCase()) != -1;


function getPeoplePickerSuggestion(searchKey) {
    var userSearchSuggestionEndpoint = "/_vti_bin/ListData.svc/UserInformationList?
        $select=Id,Name&$filter=substringof('" + searchKey + "',Name)";
    return baseSvc.getRequest(userSearchSuggestionEndpoint);

Also see my article in code project for more details.


You need to use client-side people picker control for SharePoint wrapped in an AngularJS directive

there are few links which may help you

https://github.com/jasonvenema/sharepoint-angular-peoplepicker https://github.com/matthewyarlett/AngularJS-Directive-for-SharePoint-People-Picker

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.