ng-tags-input with editable
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Tes</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" media="screen">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet" media="screen">
<script src="scripts/directives/contoller.js"></script>
</head>
<div ng-controller="MainCtrl">
<form data-editable-form name="ngTagsForm">
<span editable-tags-input="user.tags" data-e-form="ngTagsForm" data-e-name="tags" name="tags" data-e-ng-model="user.tags">
{{user.tags}}
<editable-tags-input-auto-complete source="loadTags($query)"></editable-tags-input-auto-complete>
</span>
<br/>
<div class="buttons">
<!-- button to show form -->
<button type="button" class="btn btn-default" ng-click="ngTagsForm.$show()" ng-show="!ngTagsForm.$visible">
Edit
</button>
<!-- buttons to submit / cancel form -->
<span ng-show="ngTagsForm.$visible">
<br/>
<button type="submit" class="btn btn-primary" ng-disabled="ngTagsForm.$waiting">
Save
...
JavaScript
var app = angular.module('plunker', ["xeditable", "ngTagsInput"]);
app.controller('MainCtrl', function($scope, $http) {
$scope.user = {
tags: [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
],
};
});