Change scope name for selected color to avoid conflict

README.md

@@ -6,7 +6,7 @@ An Angular directive that allow you to pick a color from a custom palette
 There's a bunch of color picker components out there, they are great at what they are doing, and this one does not aims to replace them.
 Unfortunately, allowing your end user to choose any color they want to, can lead sometimes to a UI-break. So how do you handle a case when you only want to allow to pick a color from a custom color palette? This component is the answer.
 
-**Requirements:** AngularJS 1.3+  
+**Requirements:** AngularJS 1.3+
 **File Size:** 0.98 kb minified
 
 # Installation
@@ -24,7 +24,7 @@ Download [https://github.com/softmonkeyjapan/angular-color-chooser/archive/v0.1.
 
 # Usage
 
-1. Include both the `color-chooser.css` and `color-chooser.js` in your HTML.  
+1. Include both the `color-chooser.css` and `color-chooser.js` in your HTML.
 
   ```html
   <link rel="stylesheet" href="color-chooser.css">
@@ -37,7 +37,7 @@ Download [https://github.com/softmonkeyjapan/angular-color-chooser/archive/v0.1.
   angular.module('myApp', ['lk-color-chooser'])
   ```
 
-3. Configure the plugin (see below **configuration** section)  
+3. Configure the plugin (see below **configuration** section)
 
 4. Create a scope to bind the value of the selected color
 
@@ -54,19 +54,19 @@ Download [https://github.com/softmonkeyjapan/angular-color-chooser/archive/v0.1.
 5. Add the directive to your HTML element
 
   ```html
-  <lk-color-chooser selected="example.selectedColor"></lk-color-chooser>
+  <lk-color-chooser selectedColor="example.selectedColor"></lk-color-chooser>
   ```
 
 6. That's it, you're done!
 
 
-# Configuration  
+# Configuration
 
 In order for the component to work, you'll need to provide a set of colors. There's 2 ways of doing this :
 
 ### Using configure(options) from Provider
 
-You can define in a global way, the set of colors you want to use within your app.  
+You can define in a global way, the set of colors you want to use within your app.
 NOTE : This will be override if you pass the colors directly from a scope (see below).
 
 ```js
@@ -78,11 +78,11 @@ angular.module('myApp', ['lk-color-chooser'])
     colors: ['#72C2FF', '#6798E6', '#CEA1E1', '#FFADED', '#FC809B', '#FFC787', '#FFF074', '#A6FC81', '#09E6AE', '#18C4C7']
   });
 }])
-``` 
+```
 
 ### From a controller
 
-In some case, you will want to use some colors, maybe different from the ones defined within the provider. In that case you can create a new scope from inside a controller : 
+In some case, you will want to use some colors, maybe different from the ones defined within the provider. In that case you can create a new scope from inside a controller :
 
 ```js
 angular
@@ -95,15 +95,15 @@ angular
 and simply pass it to the directive :
 
 ```html
-<lk-color-chooser colors="example.colors" selected="example.selectedColor"></lk-color-chooser>
+<lk-color-chooser colors="example.colors" selectedColor="example.selectedColor"></lk-color-chooser>
 ```
 
 NOTE : Passing a scope to the directive's `colors` attribute will override the provider definition.
 
 # Tests
 
 ```bash
-npm install
+npm install && npm install -g karma-cli
 bower install
 karma start test/karma.conf.js
 ```

dist/color-chooser.js

@@ -52,16 +52,16 @@
   .directive('lkColorChooser', ['lkColorSettings', '$timeout', function (lkColorSettings, $timeout) {
     return {
       restrict: 'EA',
-      template: '<ul class="lk-color-chooser"><lk-color ng-repeat="color in colors track by $index" color="color" ng-class="{\'selected\': selected == color}"></lk-color></ul>',
+      template: '<ul class="lk-color-chooser"><lk-color ng-repeat="color in colors track by $index" color="color" ng-class="{\'selected\': selectedColor == color}"></lk-color></ul>',
       replace: true,
       scope: {
         colors: '=?',
-        selected: '='
+        selectedColor: '='
       },
       controller: ['$scope', '$timeout', function lkColorChooserCtrl ($scope, $timeout) {
         this.setSelectedColor = function (color) {
           $timeout(function() {
-            $scope.selected = color;
+            $scope.selectedColor = color;
           });
         }
       }],

src/color-chooser.js

@@ -52,16 +52,16 @@
   .directive('lkColorChooser', ['lkColorSettings', '$timeout', function (lkColorSettings, $timeout) {
     return {
       restrict: 'EA',
-      template: '<ul class="lk-color-chooser"><lk-color ng-repeat="color in colors track by $index" color="color" ng-class="{\'selected\': selected == color}"></lk-color></ul>',
+      template: '<ul class="lk-color-chooser"><lk-color ng-repeat="color in colors track by $index" color="color" ng-class="{\'selected\': selectedColor == color}"></lk-color></ul>',
       replace: true,
       scope: {
         colors: '=?',
-        selected: '='
+        selectedColor: '='
       },
       controller: ['$scope', '$timeout', function lkColorChooserCtrl ($scope, $timeout) {
         this.setSelectedColor = function (color) {
           $timeout(function() {
-            $scope.selected = color;
+            $scope.selectedColor = color;
           });
         }
       }],