[SalesForce] Type mismatch for

One mechanism for doing this would be to pass the page controller instance as the parameter to the component and then the component can call the page controller's methods itself via that reference.

Here is a functional example:

Page Controller

public with sharing class TestPageController {

    public TestPageController selfReference { get; set; }

    public Integer myInteger { get; set; }
    public String myString { get; set; }

    public TestPageController() {
        this.myInteger = 1;
        this.myString = String.valueOf(this.myInteger);
        selfReference = this;
    }

    public PageReference myStringAction() {
        // increment the integer and add it to the string
        this.myInteger += 1;
        this.myString += ', ' + String.valueOf(this.myInteger);
        return null;
    }
    public PageReference myRedirectAction() {
        // this essentially is doing a 'reset'
        PageReference pRef = Page.TestPage;
        pRef.setRedirect(true);
        return pRef;
    }
}

Component Controller

public with sharing class TestComponentController {

    public TestPageController thePageController { get; set; }

    public PageReference doPageControllerAction1() {
        return thePageController.myStringAction();
    }

    public PageReference doPageControllerAction2() {
        return thePageController.myRedirectAction();
    }
}

Component Markup (TestComponent.component)

<apex:component controller="TestComponentController" >
    <apex:attribute name="PageController" type="TestPageController" assignTo="{!thePageController}" required="true" description="the root page controller reference" />

    <p>The Component Body</p>
    <p>via local component controller methods by reference</p>
    <apex:commandButton action="{!doPageControllerAction1}" value="Fire Page Controller Action 1 (string) through component controller method" /><br />
    <apex:commandButton action="{!doPageControllerAction2}" value="Fire Page Controller Action 2 (redirect) through component controller method"/><br />

    <p>via Component Attribute's Name property reference</p>
    <apex:commandButton action="{!PageController.myStringAction}" value="Fire string action method through attribute name reference" /><br />

    <p>via direct reference through value set by 'assignTo' on attribute</p> 
    <apex:commandButton action="{!thePageController.myStringACtion}" value="Fire string action through controller reference" /><br />

    <p>data retrieved via component controller's pagecontroller reference</p>

    MyInteger: <apex:outputText value="{!thePageController.myInteger}" /><br />
    MyString: <apex:outputText value="{!thePageController.myString}" /><br />
</apex:component>

Page Markup (TestPage.page)

<apex:page controller="TestPageController" >
    <p>the myString value will be concatenated each time an action fires with the current myInteger value</p>
    <apex:form> 
        <c:TestComponent PageController="{!selfReference}" />
    </apex:form>
</apex:page>

Tehnrd,

Long story short:

ng-options validates the Options list it generates against the evaluated scope statement given to it.

From your source above, '--choose color--' isn't part of the $color array. While the docs specifically mention using a option element with an nil value for the "nothing selected" element, I've discovered that visualforce strips the options tags that have a nil value. If you look at your visualforce rendered source, the nil value option element is missing. Because the element is missing, ng-option is inserting a blank select option.

Two ideas for a direct workaround

1: Given a select object with id "colorSelect":

angular.getElement('#colorSelect').append('<option value=\'\'>--choose color--</option>');

before your ng-options directive is executed. thats ugly and hacky and i don't like it. Likewise you could alter the value, if you chose that way. Thats actually probably a better way.

2: I think the most-elegant way to do this (and it's still lipstick on a pig) is to add your '--choose color--' option to the $scope.colors array as a value. Ng-options will render it as the selected option once you set $scope.color = '--choose color--'

Then create a watch function that removes '--choose color--' from the array when $scope.color changes.

Here's a js Fiddle with the watch statement doing it's job and the default being chosen from teh given array.

http://jsfiddle.net/Nr9L4/