Manage placeholder

src/tags-input.js

@@ -303,6 +303,9 @@ export default function TagsInputDirective($timeout, $document, $window, $q, tag
       scope.$watch('tags.length', () => {
         setElementValidity();
 
+        // show placeholder only if there are no tags and no input
+        input.attr('placeholder', tagList.items.length === 0 && input.val() === '' ? options.placeholder : '');
+
         // ngModelController won't trigger validators when the model changes (because it's an array),
         // so we need to do it ourselves. Unfortunately this won't trigger any registered formatter.
         ngModelCtrl.$validate();

test/tags-input.spec.js

@@ -847,6 +847,29 @@ describe('tags-input directive', () => {
       // Assert
       expect(isolateScope.options.placeholder).toBe('Add a tag');
     });
+
+    it('clears the placeholder if there is at least one tag', () => {
+      // Arrange
+      compile();
+
+      // Act
+      newTag('foo');
+
+      // Assert
+      expect(getInput().attr('placeholder')).toBe('');
+    });
+
+    it('restores the placeholder when there are no tags', () => {
+      // Arrange
+      compile();
+
+      // Act
+      newTag('foo');
+      getRemoveButton(0).click();
+
+      // Assert
+      expect(getInput().attr('placeholder')).toBe('Add a tag');
+    });
   });
 
   describe('remove-tag-symbol option', () => {