---
title: "AngularJS integration"
description: "This directive allows you to add a TinyMCE editor to your form elements."
canonical_url: "https://www.tiny.cloud/docs/tinymce/5/angularjs/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/angularjs/index.md"
version: "5"
last_updated: "2024-03-26T08:09:19Z"
tokens: 681
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/).
# AngularJS integration
Integration with AngularJS is currently done through [angular-ui-tinymce](https://github.com/angular-ui/ui-tinymce) a third party module. This how-to shows you how to setup a project using [AngularJS](https://angularjs.org/) and [TinyMCE](../basic-example/).
## 1. Setting up the project directory
First, we create a directory for the project called "tinymce-angular-demo". After that, we run "bower init"in the new directory, this will set up a new empty bower project.
```
$ mkdir tinymce-angular-demo
$ cd tinymce-angular-demo
$ bower init
```
## 2. Installation of angular, ui-tinymce and tinymce
We now install the angular-ui-tinymce package this will automatically install angular and TinyMCE.
```
$ bower install angular-ui-tinymce --save
```
## 3. Creating the demo.html file
This **demo.html** file has angular properties and two calls to the controller.
```html
```
## 4. Creating the app.js file
The **app.js** file shows you how to work with the model that automatically updates TinyMCE.
```js
var myAppModule = angular.module('myApp', ['ui.tinymce']);
myAppModule.controller('TinyMceController', function($scope) {
$scope.tinymceModel = 'Initial content';
$scope.getContent = function() {
console.log('Editor content:', $scope.tinymceModel);
};
$scope.setContent = function() {
$scope.tinymceModel = 'Time: ' + (new Date());
};
$scope.tinymceOptions = {
plugins: 'link image code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
};
});
```
## 5. Testing the application
You can now test the application by running the demo.html page in your favorite browser.
## A note about integrations
> **Important:** This Integration is maintained by a third-party developer. Tiny Technologies, Inc. bears no responsibility for this integration, which is not covered by the Tiny Self-Hosted Software License Agreement. For issues related to the integration, contact the third-party project directly.