title: Using Basicprimitive with Angularjs Error: jQuery(...).orgDiagram is not a function
body: <p>I am trying to convert this sample <a href="http://www.basicprimitives.com/index.php?option=com_content&amp;view=article&amp;id=71&amp;Itemid=116&amp;lang=en" rel="nofollow">http://www.basicprimitives.com/index.php?option=com_content&amp;view=article&amp;id=71&amp;Itemid=116&amp;lang=en</a> into my angular application.
  But every time I get below error</p>
  
  <pre class="lang-none prettyprint-override"><code>TypeError: jQuery(...).orgDiagram is not a function
      at link (http://localhost:32150/app/BasicPrimitives.js:14:45)
      at http://localhost:32150/scripts/angular.js:7094:44
      at nodeLinkFn (http://localhost:32150/scripts/angular.js:6692:13)
      at compositeLinkFn (http://localhost:32150/scripts/angular.js:6086:13)
      at compositeLinkFn (http://localhost:32150/scripts/angular.js:6089:13)
      at nodeLinkFn (http://localhost:32150/scripts/angular.js:6686:24)
      at compositeLinkFn (http://localhost:32150/scripts/angular.js:6086:13)
      at compositeLinkFn (http://localhost:32150/scripts/angular.js:6089:13)
      at compositeLinkFn (http://localhost:32150/scripts/angular.js:6089:13)
      at compositeLinkFn (http://localhost:32150/scripts/angular.js:6089:13) 
          &lt;div bp-org-diagram="" data-options="myOptions" data-on-highlight-changed="onMyHighlightChanged()" data-on-cursor-changed="onMyCursorChanged()" style="width: 800px; height: 600px; border-style: dotted; border-width: 1px;" class="ng-isolate-scope"&gt; (anonymous function)
          @ angular.js:10046$get
          @ angular.js:7343(anonymous function)
          @ config.exceptionHandler.js:21nodeLinkFn
          @ angular.js:6695compositeLinkFn
          @ angular.js:6086compositeLinkFn
          @ angular.js:6089nodeLinkFn
          @ angular.js:6686compositeLinkFn
          @ angular.js:6086compositeLinkFn
          @ angular.js:6089compositeLinkFn
          @ angular.js:6089compositeLinkFn
          @ angular.js:6089compositeLinkFn
          @ angular.js:6089nodeLinkFn 
          @ angular.js:6686compositeLinkFn 
          @ angular.js:6086publicLinkFn 
          @ angular.js:5982link 
          @ angular-route.js:919nodeLinkFn 
          @ angular.js:6692compositeLinkFn 
          @ angular.js:6086publicLinkFn 
          @ angular.js:5982$get.boundTranscludeFn 
          @ angular.js:6106controllersBoundTransclude 
          @ angular.js:6713update 
          @ angular-route.js:869$get.Scope.$broadcast 
          @ angular.js:12937(anonymous function) 
          @ angular-route.js:550deferred.promise.then.wrappedCallback 
          @ angular.js:11546deferred.promise.then.wrappedCallback 
          @ angular.js:11546(anonymous function)
          @ angular.js:11632$get.Scope.$eval 
          @ angular.js:12658$get.Scope.$digest 
          @ angular.js:12470$get.Scope.$apply 
          @ angular.js:12762done 
          @ angular.js:8357completeRequest 
          @ angular.js:8571xhr.onreadystatechange 
          @ angular.js:8510
  angular.js:10046 [app]  [HT Error] jQuery(...).orgDiagram is not a function Object {exception: TypeError: jQuery(...).orgDiagram is not a function
  at link (http://localhost:32150/app/BasicPri…, cause: "&lt;div bp-org-diagram="" data-options="myOptions" da…ed; border-width: 1px;" class="ng-isolate-scope"&gt;"}
  </code></pre>
  
  <p>If I take the above sample its working fine. in my main app module I have several other modules injected. but on injection of basic primitive module I get above error </p>
  
  <p>App Module : </p>
  
  <pre><code>var app = angular.module('app', [
  
          // Angular modules 
          'ngAnimate',        // animations
          'ngRoute',          // routing
          'ngSanitize',       // sanitizes html bindings (ex: sidebar.js)
          'ui.grid',
          // Custom modules 
          'common',           // common functions, logger, spinner
          'common.bootstrap', // bootstrap dialog wrapper functions
          'LocalStorageModule',
          'angular-loading-bar',        
          'angularFileUpload',
          'BasicPrimitives',
          // 3rd Party Modules
          'ui.bootstrap'      // ui-bootstrap (ex: carousel, pagination, dialog)
  
      ]);
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="centerpanel" style="overflow: hidden; padding: 0px; margin: 0px; border: 0px;"&gt;
      &lt;div bp-org-diagram data-options="myOptions" data-on-highlight-changed="onMyHighlightChanged()" data-on-cursor-changed="onMyCursorChanged()"
          style="width: 800px; height: 600px; border-style: dotted; border-width: 1px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JsController:</p>
  
  <pre><code>(function () {
      'use strict';
      var controllerId = 'orgdepartmentJsController';
      angular.module('app').controller(controllerId, ['$scope', 'common', '$location','ngAuthSettings', 'orgdepartmentJsService', orgdepartmentJsController]);
  
      function orgdepartmentJsController($scope, common, $location,ngAuthSettings, orgdepartmentJsService) {
          var getLogFn = common.logger.getLogFn;
          var log = getLogFn(controllerId);
  
          var vm = this;
          $scope.title = 'Departments';
  
          activate();
          $scope.index = 10;
          $scope.Message = "";
          $scope.orgdepartmentList = [];
          $scope.editMode = 'List';
          $scope.objorgdepartment = {};
  
          $scope.addNew = function () {
              $scope.editMode = 'New';
          };
          $scope.cancel = function () {
              getorgdepartment();
              $scope.editMode = 'List';            
          };
          $scope.save = function (objorgdepartment) {
              $scope.editMode = 'List';
              orgdepartmentJsService.save(objorgdepartment).then(function (results) {
  
              }, function (error) {
                  alert(error.data.message);
              });
          };
  
  
          function getorgdepartment() {
              orgdepartmentJsService.getall().then(function (results) {
                  //debugger;
                  $scope.orgdepartmentList = results.data;
                  $("#grid").kendoGrid({
                      toolbar: ["excel"],
                      excel: {
                          fileName: "Kendo UI Grid Export.xlsx",
                          //proxyURL: "//demos.telerik.com/kendo-ui/service/export",
                          filterable: true
                      },
                      dataSource: {
  
                          data: $scope.orgdepartmentList,
                          schema: {
                              model: {
                                  fields: {
                                      DepartmentName: { type: "string" },
                                      Description: { type: "string" }
                                  }
                              }
                          },
                          pageSize: 20
                      },
                      height: 550,
                      scrollable: true,
                      sortable: true,
                      filterable: true,
                      pageable: {
                          input: true,
                          numeric: false
                      },
  
                      columns: [
  
                          { field: "departmentName", title: "DepartmentName", width: "130px" },
                          { field: "description", title: "Description", width: "130px" }
                      ]
                  });
  
  
  
  
              }, function (error) {
                  // debugger;
                  alert(error.data.message);
              });
          }
          function activate() {
              common.activateController([], controllerId)
                  .then(function () { log('Activated Departments View'); });
              getorgdepartment();
          }
          var serviceBase = ngAuthSettings.apiServiceBaseUri;
  
          //OrgChart
  
          $scope.orgChart = function () {
              $scope.editMode = 'OrgChart';
  
          }
          $scope.index = 10;
          $scope.Message = "";
  
          var options = {};
  
          var items = [
              new primitives.orgdiagram.ItemConfig({
                  id: 0,
                  parent: null,
                  title: "Scott Aasrud",
                  description: "Root",
                  phone: "1 (416) 001-4567",
                  email: "scott.aasrud@mail.com",
                  image: "demo/images/photos/a.png",
                  itemTitleColor: primitives.common.Colors.RoyalBlue
              }),
              new primitives.orgdiagram.ItemConfig({
                  id: 1,
                  parent: 0,
                  title: "Ted Lucas",
                  description: "Left",
                  phone: "1 (416) 002-4567",
                  email: "ted.lucas@mail.com",
                  image: "demo/images/photos/b.png",
                  itemTitleColor: primitives.common.Colors.RoyalBlue
              }),
              new primitives.orgdiagram.ItemConfig({
                  id: 2,
                  parent: 0,
                  title: "Joao Stuger",
                  description: "Right",
                  phone: "1 (416) 003-4567",
                  email: "joao.stuger@mail.com",
                  image: "demo/images/photos/c.png",
                  itemTitleColor: primitives.common.Colors.RoyalBlue
              }),
              new primitives.orgdiagram.ItemConfig({
                  id: 3,
                  parent: 2,
                  title: "Hidden Node",
                  phone: "1 (416) 004-4567",
                  email: "hidden.node@mail.com",
                  description: "Dotted Node",
                  image: "demo/images/photos/e.png",
                  itemTitleColor: primitives.common.Colors.PaleVioletRed
              })
          ];
  
          options.items = items;
          options.cursorItem = 0;
          options.highlightItem = 0;
          options.hasSelectorCheckbox = primitives.common.Enabled.True;
          options.templates = [getContactTemplate()];
          options.defaultTemplateName = "contactTemplate";
  
          $scope.myOptions = options;
  
          $scope.setCursorItem = function (item) {
              $scope.myOptions.cursorItem = item;
          };
  
          $scope.setHighlightItem = function (item) {
              $scope.myOptions.highlightItem = item;
          };
  
          $scope.deleteItem = function (index) {
              $scope.myOptions.items.splice(index, 1);
          }
  
          $scope.addItem = function (index, parent) {
              var id = $scope.index++;
              $scope.myOptions.items.splice(index, 0, new primitives.orgdiagram.ItemConfig({
                  id: id,
                  parent: parent,
                  title: "New title " + id,
                  description: "New description " + id,
                  image: "demo/images/photos/b.png"
              }));
          }
  
          $scope.onMyCursorChanged = function () {
              $scope.Message = "onMyCursorChanged";
          }
  
          $scope.onMyHighlightChanged = function () {
              $scope.Message = "onMyHighlightChanged";
          }
  
          function getContactTemplate() {
              var result = new primitives.orgdiagram.TemplateConfig();
              result.name = "contactTemplate";
  
              result.itemSize = new primitives.common.Size(220, 120);
              result.minimizedItemSize = new primitives.common.Size(5, 5);
              result.minimizedItemCornerRadius = 5;
              result.highlightPadding = new primitives.common.Thickness(2, 2, 2, 2);
  
  
              var itemTemplate = jQuery(
                '&lt;div class="bp-item bp-corner-all bt-item-frame"&gt;'
                  + '&lt;div name="titleBackground" class="bp-item bp-corner-all bp-title-frame" style="background:{{itemTitleColor}};top: 2px; left: 2px; width: 216px; height: 20px;"&gt;'
                      + '&lt;div name="title" class="bp-item bp-title" style="top: 3px; left: 6px; width: 208px; height: 18px;"&gt;{{itemConfig.title}}&lt;/div&gt;'
                  + '&lt;/div&gt;'
                  + '&lt;div class="bp-item bp-photo-frame" style="top: 26px; left: 2px; width: 50px; height: 60px;"&gt;'
                      + '&lt;img name="photo" src="{{itemConfig.image}}" style="height: 60px; width:50px;" /&gt;'
                  + '&lt;/div&gt;'
                  + '&lt;div name="phone" class="bp-item" style="top: 26px; left: 56px; width: 162px; height: 18px; font-size: 12px;"&gt;{{itemConfig.phone}}&lt;/div&gt;'
                  + '&lt;div class="bp-item" style="top: 44px; left: 56px; width: 162px; height: 18px; font-size: 12px;"&gt;&lt;a name="email" href="mailto::{{itemConfig.email}}" target="_top"&gt;{{itemConfig.email}}&lt;/a&gt;&lt;/div&gt;'
                  + '&lt;div name="description" class="bp-item" style="top: 62px; left: 56px; width: 162px; height: 36px; font-size: 10px;"&gt;{{itemConfig.description}}&lt;/div&gt;'
              + '&lt;/div&gt;'
              ).css({
                  width: result.itemSize.width + "px",
                  height: result.itemSize.height + "px"
              }).addClass("bp-item bp-corner-all bt-item-frame");
              result.itemTemplate = itemTemplate.wrap('&lt;div&gt;').parent().html();
  
              return result;
          }
  
  
      }
  })();
  </code></pre>
  
  <p>Script Links on Index Page</p>
  
  <pre><code>&lt;script src="scripts/jquery-2.1.1.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/primitives.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular-file-upload.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/angular-ui/ui-bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="scripts/angular-cookies.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular-resource.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular-local-storage.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/loading-bar.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/ui-grid-unstable.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/toastr.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/moment.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/ui-bootstrap-tpls-0.10.0.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/spin.js"&gt;&lt;/script&gt;
  
      &lt;script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"&gt;&lt;/script&gt;
      &lt;script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"&gt;&lt;/script&gt;
  
  
      &lt;!--&lt;script src="app/login.js"&gt;&lt;/script&gt;--&gt;
      &lt;!-- Bootstrapping --&gt;
      &lt;script src="app/BasicPrimitives.js"&gt;&lt;/script&gt;
      &lt;script src="app/app.js"&gt;&lt;/script&gt;
  </code></pre>